ESLint以及安装配置相关插件

1.创建带 eslint 的项目

1.1 写在前面的 VSCode 配置

• 在设置中搜索 tabsize修改下面两个选项

  
  
  

• 在设置中搜索 format on save修改下面这个选项

1.2 创建流程

其他选项与之前类似，下面列出了需要新配置的选项：

2. .eslintrc.js 配置文件中的rules 节点

rules 节点：

如何查看 rules?

ESLint官网 => 用户指南 => 规则 => ctrl + f 搜索需要查询的规则

3. 初步了解语法规则

• no-multiple-empty-lines 不能出现多行空行

error More than 1 blank line not allowed 不允许超过1个空行

• eol-last 要求或禁止文件末尾存在空行

• no-trailing-spaces 禁用行尾空格

• quotes 强制使用一致的反勾号、双引号或单引号

• key-spacing 强制在对象字面量的属性中键和值之间使用一致的间距

• comma-dangle 要求或禁止末尾逗号,不允许在对象的属性后加逗号

• spaced-comment 强制在注释中 // 或 /* 使用一致的空格

• indent 强制使用一致的缩进

• import/first import 导入要放在顶部

• no-unused-vars 声明一个变量或常量却没有用到

• space-before-function-paren 强制在 function的左括号之前使用一致的空格

4. 安装并配置 ESlint 插件

在 settings.json 中加入下面的配置：

// ESLint 插件的配置
"editor.codeActionsOnSave":{
    "source.fixAll": true
}

5. Prettier - Code formatter插件

6. 一些参考配置

写在 settings.json 中，之后重启 VSCode

// eslint
"eslint.alwaysShowStatus": true,
// vetur
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "semi": false, //不加分号
        "singleQuote": true ,//用单引号
        "trailingComma": "none",
        "arrowParens": "avoid",
        "printWidth": 300
    },
    "js-beautify-html": {
        "wrap_attributes": false
    }
},
"files.associations": {
    "*.vue": "vue"
},
// prettie
//下面这一行是在Users的自己用户下建立一个 .prettierrc 文件
"prettier.configPath": "C:\\Users\\8615\\.prettierrc",
"prettier.printWidth": 300,
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.arrowParens":"avoid",
"prettier.trailingComma": "none",
"[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}, // 对象最后一个属性不加添加逗号

.prettierrc 这个文件里不要写中文注释

{
    "semi": false,
    "singleQuote": true,
    "bracketSpacing": true
}