ESlint可以为项目代码风格检查，统一规范项目成员的代码风格，利于后期维护和协作。
一般脚手架工具已经自动帮我们自动集成了 eslint ，以 vue-cli 为例子,创建项目过程中，可以添加 eslint 配置
vue create project-exm
安装之后，一般会有一个文件叫做 .eslintrc.js,一般是下面这个样子，在配置文件中，使用 "extends": "eslint:recommended" 来启用推荐的规则，报告一些常见的问题,我们可以在 rules 里配置我们自己的规则
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: "babel-eslint"
},
rules: {
// 开启 console
'no-console': 'off',
'no-useless-catch': 'off',
'no-async-promise-executor': 'off',
'no-unused-vars': 'off',
// prettier配置
'prettier/prettier': [
'error',
{
singleQuote: true, //单引号
tabWidth: 4, // tab是4个空格
semi: false // 不要分号结尾
}
],
// "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
}
};
可以参考官方的推荐配置，下图截取了部分例子：
vue-cli eslint-loader配置
下面的配置是通过 运行 vue inspect 来查看 eslint-loader的配置，正常是只检测 src 的业务代码 ，排除 node_modules目录，从而提高了编译打包速度
{
enforce: 'pre',
test: /\.(vue|(j|t)sx?)$/,
exclude: [
/node_modules/,
'/Users/***/Documents/WDH_library/myProject/my-vue-lib/node_modules/@vue/cli-service/lib'
],
use: [
/* config.module.rule('eslint').use('eslint-loader') */
{
loader: '/Users/***/Documents/WDH_library/myProject/my-vue-lib/node_modules/eslint-loader/index.js',
options: {
extensions: [
'.js',
'.jsx',
'.vue'
],
cache: true,
cacheIdentifier: '171111d4',
emitWarning: false,
emitError: false,
eslintPath: '/Users/***/Documents/WDH_library/myProject/my-vue-lib/node_modules/eslint',
formatter: undefined
}
}
]
}
我们可以添加.eslintignore文件，配置不检测的文件
# 根据自己的实际需求进行添加
node_modules/*
vue.config.js
postcss.config.js
build/
babel.config.js
VS Code ESLint extension
vs code 编辑器安装 eslint 插件，可以为编辑器提供根据 eslint配置自动格式化的功能，每次保存的时候，进行格式化，免去了手动格式化的烦恼，舒服了很多。
