vs Code + Eslint + Prettier 代码格式化(vue开发)
随心小宝 人气:0一、什么是Eslint
通过查看eslint官网（官网传送门），我们就可以知道，eslint就是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具，主要用来检测代码风格是不是符合指定的规则/规范，这样有利于团队开发的时候代码风格统一，.毕竟每个人的代码风格不一致，使用eslint代码校验工具就保证了代码风格的统一性。
二、什么Prettier
通过查看prettier官网（官网传送门），我们就知道，prettier是一个代码格式化工具，包括JavaScript (including experimental features)、JSX、Angular、Vue、Flow、TypeScript、CSS, Less, and SCSS、HTML、JSON、GraphQL、Markdown, including GFM and MDX、YAML各种语言，简而言之，这个工具能够使输出代码保持风格一致。
三、vs Code安装相关插件
在这里我默认你已经安装好了vs Code，如果还没有安装后者不知道怎么安装也没关系，可以查看安装vs Code的其他博客，我这里不在赘述。vs Code安装好之后，这里要介绍几个常用的插件，可以灵活使用，以方便使用提高效率为原则。
1、Vetur: vue语法高亮插件;
2、ESlint 语法错误检测工具；
3、HTML Snippets 回车或按下Tab键生成标签；
4、Auto Rename Tag 自动修改匹配的标签；
5、prettier 代码格式化工具；
四、vs Code格式化相关配置
vs Code格式化插件有很多，这里首推prettier，可以根据自己的需求进行配置，并且设置format on save，就会在代码格式化的时候自动保存
{
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 200,
"wrap_attributes": "auto",
"end_with_newline": false
}
},
//分号
"prettier.semi": false,
"prettier.singleQuote": true, //使用单引号替代双引号
"prettier.eslintIntegration": true,
//函数前加空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"eslint.workingDirectories": [
".eslintrc.js",
{
"mode": "auto"
}
],
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "vue", "autoFix": true }
],
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//默认JavaScript格式化程序(为了更美观)
"javascript.format.enable": true,
"prettier.arrowParens": "avoid",
}
五、eslint相关配置
eslint先关配置跟prettier结合起来，设置prettier的eslintIntegration属性为true，就可以根据eslint相关配置规则格式化代码，相关配置如下，更多配置规则请查看官网
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true
// "jest"：true
},
// required to lint *.vue files
plugins: ['vue'],
extends: ['plugin:vue/essential', 'standard'],
// add your custom rules here
rules: {
// allow async-await
camelcase: 'off',
'no-console': 'error',
'standard/no-callback-literal': 'off',
'generator-star-spacing': 'off',
'space-before-function-paren': [
'error',
{
anonymous: 'always',
named: 'never',
asyncArrow: 'never'
}
],
'func-call-spacing': ['error', 'never'],
'vue/no-mutating-props': 'nerve',
// allow debugger during development
// 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': 'error',
'template-curly-spacing': 'off',
quotes: ['error', 'single'],
// 强制不使用分号结尾
semi: ['error', 'never'],
indent: [
'error',
2,
{
ignoredNodes: ['TemplateLiteral', 'ConditionalExpression'],
SwitchCase: 1
}
]
// end 解决eslint报错问题
}
}
在setting.json中设置一下配置，可在格式化的时候自动安装eslint规则修复不符合规范的代码。
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "vue", "autoFix": true }
],
加载全部内容