最近用webpack4 ( 非vue-cli ) 搭建了一個vue項目惠勒，因為要和多人協(xié)作完成，所以配置了eslint漆羔。因為網(wǎng)上的教程都有點過時了剿干，讓我踩了坑婆芦，這里提供的是 2019/5/2 的最新配置方法怕磨，并且還提供了vscode 的 ESLint + Prettier + Vetur 擴展配置喂饥，以便于更好地支持eslint。
適用對象：webpack4 + vue2 以及 vscode使用者
webpack 配置
安裝依賴
總依賴列表, 你可以復(fù)制進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函數(shù)需要自己定義棠枉，其實就是根目錄下的src文件。
rules:[
···
{
test: /\.(js|vue)$/,
use: {
loader: 'eslint-loader',
options: {
formatter: require('eslint-friendly-formatter') // 默認的錯誤提示方式
}
},
enforce: 'pre', // 編譯前檢查
include: [resolve('src')]
},
]
.eslintrc.js 配置
這是eslint的主要配置文件泡挺，之前我踩的坑也是因為這里的配置經(jīng)常出錯。當然命浴，在未來可能我這個配置也會過時娄猫，推薦大家多查看下官方文檔：https://vuejs.github.io/eslint-plugin-vue/user-guide/#usage
可以將下面對內(nèi)容完整復(fù)制進根目錄下創(chuàng)建的 .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文件。
同樣碍讯，可以將下面對內(nèi)容完整復(fù)制進根目錄下創(chuàng)建的 .eslintignore 文件悬蔽。
build/*.js
dist/*.js
src/assets/js/*.js
.editorconfig
這是我個人推薦加的配置文件，如果你只需要eslint可以不加捉兴。用來告訴編輯器你的項目一些規(guī)則比如代碼縮進蝎困。
同樣，你可以復(fù)制然后放在根目錄下創(chuàng)建的 .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的配置到此結(jié)束啦倍啥，下面介紹vscode的配置禾乘。
vscode
這里不廢話直接放配置文件，先在擴展那里安裝ESLint + Prettier + Vetur 這三個插件虽缕，然后按 ctrl+shift+t 打開 setting.json 就可以往里面貼配置啦始藕。
{
// tab 大小為2個空格
"editor.tabSize": 2,
// 100 列后換行
"editor.wordWrapColumn": 100,
// 保存時格式化
"editor.formatOnSave": true,
// prettier 設(shè)置強制單引號
"prettier.singleQuote": true,
// prettier 去分號
"prettier.semi": false,
// prettier 開啟eslint規(guī)范
"prettier.eslintIntegration": true,
// prettier 在vue文件禁用
"prettier.disableLanguages": ["vue"],
// 設(shè)置 eslint 保存時自動修復(fù)
"eslint.autoFixOnSave": true, // try
// eslint 檢測文件類型
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
// vetur 的自定義設(shè)置
"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
}
創(chuàng)作不易，有需要幫助的留言氮趋，覺得有用的請點贊哦～??
