最近用webpack4 ( 非vue-cli ) 搭建了一个vue项目，因为要和多人协作完成，所以配置了eslint。因为网上的教程都有点过时了，让我踩了坑，这里提供的是 2019/5/2 的最新配置方法，并且还提供了vscode 的 ESLint + Prettier + Vetur 扩展配置，以便于更好地支持eslint。
适用对象：webpack4 + vue2 以及 vscode使用者
webpack 配置
安装依赖
总依赖列表, 你可以复制进package.json, 然后用 npm install 安装。
devDependencies:{
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.2",
"eslint-plugin-html": "^5.0.3",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.2.2",
}
package.json 配置
为了添加一个 lint 命令，用来检测语法错误，npm run lint 就可以使用。
"scripts": {
"build": "webpack --mode=production --config build/webpack.base.conf.js",
"dev": "NODE_ENV=development webpack-dev-server --config build/webpack.base.conf.js",
"lint": "eslint --ext .js,.vue src" // 添加这一行
},
webpack.config.js 配置
对js文件和vue文件启用eslint检查，由于enforce是 'pre' ，所以它会在编译前检查。
注意： resolve('src') 的resolve函数需要自己定义，其实就是根目录下的src文件。
rules:[
···
{
test: /\.(js|vue)$/,
use: {
loader: 'eslint-loader',
options: {
formatter: require('eslint-friendly-formatter') // 默认的错误提示方式
}
},
enforce: 'pre', // 编译前检查
include: [resolve('src')]
},
]
.eslintrc.js 配置
这是eslint的主要配置文件，之前我踩的坑也是因为这里的配置经常出错。当然，在未来可能我这个配置也会过时，推荐大家多查看下官方文档：https://vuejs.github.io/eslint-plugin-vue/user-guide/#usage
可以将下面对内容完整复制进根目录下创建的 .eslintrc.js 文件。
module.exports = {
root: true,
env: {
browser: true
},
extends: ['standard', 'plugin:vue/recommended'],
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
plugins: ['vue', 'html'],
// 对vue文件取消了缩进检查
overrides: [
{
files: ['*.vue'],
rules: {
indent: 'off'
}
}
],
rules: {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'no-irregular-whitespace': [
'error',
{
skipComments: true,
skipTemplates: true
}
],
'no-unused-vars': ['warn']
}
}
.eslintignore 配置
该文件主要是让eslint忽略这些文件夹下的语法检查，可以是dist目录下，build 目录下的js文件。
同样，可以将下面对内容完整复制进根目录下创建的 .eslintignore 文件。
build/*.js
dist/*.js
src/assets/js/*.js
.editorconfig
这是我个人推荐加的配置文件，如果你只需要eslint可以不加。用来告诉编辑器你的项目一些规则比如代码缩进。
同样，你可以复制然后放在根目录下创建的 .editorconfig 文件
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
webpack的配置到此结束啦，下面介绍vscode的配置。
vscode
这里不废话直接放配置文件，先在扩展那里安装ESLint + Prettier + Vetur 这三个插件，然后按 ctrl+shift+t 打开 setting.json 就可以往里面贴配置啦。
{
// tab 大小为2个空格
"editor.tabSize": 2,
// 100 列后换行
"editor.wordWrapColumn": 100,
// 保存时格式化
"editor.formatOnSave": true,
// prettier 设置强制单引号
"prettier.singleQuote": true,
// prettier 去分号
"prettier.semi": false,
// prettier 开启eslint规范
"prettier.eslintIntegration": true,
// prettier 在vue文件禁用
"prettier.disableLanguages": ["vue"],
// 设置 eslint 保存时自动修复
"eslint.autoFixOnSave": true, // try
// eslint 检测文件类型
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 100,
"singleQuote": false
},
"prettier": {
"singleQuote": true,
"proseWrap": "never",
"printWidth": 100
}
},
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "none",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.ts": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
// 文件自动保存
"files.autoSave": "afterDelay",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 括号前加空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true
}
创作不易，有需要帮助的留言，觉得有用的请点赞哦～😊
