eslint - 校验代码语法
检查语法问题,例如:声明一个变量应该 const 还是 let ,使用的变量有没有声明等等。
prettier - 统一格式化代码
检查代码风格问题,它支持多种语言,我们这里讨论关于 JavaScript 的,例如应该使用单引号还是双引号,该不该换行,tab 键占多少个空格,结尾要不要分号 等等问题。
使用 prettier 来处理代码风格的时候,就不要再同时使用 eslint 来处理代码风格问题了
安装
npm i eslint prettier eslint-plugin-prettier -D
or
yarn eslint prettier eslint-plugin-prettier --dev
配置 eslint 使其调用 prettier
在项目根目录新增.eslintrc.js
文件,并作以下配置
//.eslintrc.js
module.exports = {
root: true,
env: {
browser: true, // 设置为所需检查的代码是在浏览器环境运行的
node: true
},
extends: [
'plugin:vue/essential',
'@vue/prettier',
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
"prettier/prettier": "error"
}
}
安装vscode插件
首先,需要安装 ESLint
、Prettier - Code formatter
这两个插件
vscode插件配置
打开settings.json
文件
"editor.formatOnSave": true, // 每次保存时自动格式化
"editor.tabSize": 2, // 缩进2个空格
// 添加vue支持
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"html",
"vue",
],
"eslint.options": { //指定eslint配置文件位置
"configFile": ".eslintrc.js" //指定项目根目录中的eslint配置文件
},
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}