环境
VSCode插件：ESLint
ESLint规则：standard、vue、prettier
一些常识与坑
本文大写开头指 VSCode 插件（例：ESLint、Prettier），小写指 npm 包（例：eslint、prettier）。
VSCode 需安装 ESLint。
npm 需安装 eslint。
VSCode 不需要安装 Prettier 插件，因为 ESlint 包含了它的功能。
VSCode 的 settings.json 要把
"editor.formatOnSave":false或删掉，理由同上。Failed to load plugin 'eslint-plugin-xxx' declared in 'xxx/.eslintrc.js'
ESLint 默认从当前编辑器根目录下的 node_modules 中寻找包，如果前端工程目录在编辑器根目录下级，需要配置 ESLint 工作目录。
VSCode 的 settings.json:"eslint.workingDirectories"工作原理：
-
VSCode 写代码时
- ESLint 调用 eslint
- eslint 检查代码错误
- ESLint 把错误信息显示到“问题”窗口
-
VSCode保存时
- 触发
source.fixAll.eslint - ESLint修复错误（不确定）。
- 触发
每种 plugin/extend 有 eslint-plugin-xxx，eslint-config-xxx 一式两份。为了防止以后忘记规则，建议不使用简写。
airbnb 的规则完全基于 React，Vue 用户可以放弃了。
打开 eslint-config-standard 的源码，有以下内容，所以要下载相应包
"plugins": [
"import",
"node",
"promise",
"standard"
],
安装VSCode插件
ESLint
修改VSCode配置文件settings.json
{
// VSCode自带格式化触发条件
// ESlint包含了它的功能，且会与ESlint冲突
// 该配置项目默认值是false，如果之前被设置为true，需改为false或删掉该配置项
"editor.formatOnSave": false,
// ESlint修复操作的触发条件，保存时自动修复错误
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// eslint工作目录，如果不配置，默认是VSCode当前工作区
// eslint会从工作目录下的node_modules中寻找拓展/插件
"eslint.workingDirectories": [
"./vue"
],
}
安装eslint
$ npm i eslint -D
安装相关拓展
# 安装 standard，检查语法错误
$ npm i eslint-config-standard eslint-plugin-standard -D
# 安装 standard 的依赖 import node promise
$ npm i eslint-plugin-import eslint-plugin-node eslint-plugin-promise -D
# 安装 prettier，检查代码格式错误
$ npm i prettier eslint-plugin-prettier eslint-config-prettier -D
# 安装 .vue 文件检查工具，让eslint支持检查 .vue 文件类型
$ npm i eslint-plugin-vue -D
创建eslint的配置文件
# 按需选择具体项
$ npx eslint --init
项目根目录会生成文件 .eslintrc.js，内容如下
module.exports = {
env: {
browser: true,
es6: true
},
extends: [
'plugin:vue/essential',
'standard'
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly'
},
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module'
},
plugins: [
'vue'
],
rules: {
}
}
改为如下内容
module.exports = {
root: true,
env: {
browser: true,
node: true,
commonjs: true,
es6: true,
},
globals: {
webpackConfig: 'readonly',
},
plugins: ['eslint-plugin-babel', 'eslint-plugin-vue', 'eslint-plugin-html'],
settings: {
'import/resolver': 'webpack',
},
rules: {
'no-console': 'off',
'no-debugger': 'warn',
'no-new': 'off',
'no-var': 'error',
},
parser: 'vue-eslint-parser',
extends: [
'eslint-config-standard',
'plugin:eslint-plugin-prettier/recommended',
'eslint-config-prettier/babel',
'eslint-config-prettier/standard',
'eslint-config-prettier/vue',
],
}
创建eslint-config-prettier的配置文件
$ touch .prettierrc.js
复制如下内容
module.exports = {
//每行最大字符数量
//Specify the line length that the printer will wrap on.
//Default: 80
printWidth: 80,
//缩进长度
//Specify the number of spaces per indentation-level.
//Default: 2
tabWidth: 2,
//使用 Tab 代替空格作为缩进
//Indent lines with tabs instead of spaces.
//Default: false
useTabs: false,
//结尾处书写分号
//Print semicolons at the ends of statements.
//Default: true
semi: false,
//使用单引号代替双引号
//Use single quotes instead of double quotes.
//Default: false
singleQuote: true,
//对象的属性名是否使用引号
//Change when properties in objects are quoted.
//Valid options:
//"as-needed" - Only add quotes around object properties where required.
//"consistent" - If at least one property in an object requires quotes, quote all properties.
//"preserve" - Respect the input use of quotes in object properties.
//Default: "as-needed"
quoteProps: "as-needed",
//强制 JSX 使用单引号代替双引号
//Use single quotes instead of double quotes in JSX.
//Default: false
jsxSingleQuote: false,
//数组与对象的最后一个成员是否使用逗号
//Print trailing commas wherever possible when multi-line. (A single-line array, for example, never gets trailing commas.)
//Valid options:
//"es5" - Trailing commas where valid in ES5 (objects, arrays, etc.)
//"none" - No trailing commas.
//"all" - Trailing commas wherever possible (including trailing commas in function parameter lists and calls). This requires node 8 or a modern browser that supports ES2017 or transform with babel.
//Default: "es5"
trailingComma: "all",
//花括号内加空格
//Print spaces between brackets in object literals.
//Valid options:
//true - Example: { foo: bar }.
//false - Example: {foo: bar}.
//Default: true
bracketSpacing: true,
//JSX 标签最后一个 > 不换行
//Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
//Default: false
jsxBracketSameLine: false,
//函数的参数是否加括号
//Include parentheses around a sole arrow function parameter.
//Valid options:
//"always" - Always include parens. Example: (x) => x
//"avoid" - Omit parens when possible. Example: x => x
//Default: "always"
arrowParens: "always",
//是否对 HTML 的空格敏感（设置 ignore 解决格式化 vue template 时把最后一个 > 强制换行问题）
//Specify the global whitespace sensitivity for HTML files, see whitespace-sensitive formatting for more info.
//Valid options:
//"css" - Respect the default value of CSS display property.
//"strict" - Whitespaces are considered sensitive.
//"ignore" - Whitespaces are considered insensitive.
//Default: "css"
htmlWhitespaceSensitivity: "ignore",
//Vue 文件内的 <script> <style> 标签内的第一行代码使用缩进
//Whether or not to indent the code inside <script> and <style> tags in Vue files. Some people (like the creator of Vue) don’t indent to save an indentation level, but this might break code folding in your editor.
//Valid options:
//false - Do not indent script and style tags in Vue files.
//true - Indent script and style tags in Vue files.
//Default: false
vueIndentScriptAndStyle: false,
//行尾符号
//Valid options:
//"lf" – Line Feed only (\n), common on Linux and macOS as well as inside git repos
//"crlf" - Carriage Return + Line Feed characters (\r\n), common on Windows
//"cr" - Carriage Return character only (\r), used very rarely
//"auto" - Maintain existing line endings (mixed values within one file are normalised by looking at what’s used after the first line)
//Default: "lf"
endOfLine: "auto"
}
