背景
操作系统：win10
编辑器：vscode
项目：vue cli3 + typescript
目的：配置保存时自动格式化代码并且修复可修复的eslint语法错误
生成项目配置
命令：
vue create <项目名>
linter配置选择ESLint+Prettier：
Vue CLI v3.6.3
┌───────────────────────────┐
│ Update available: 4.0.5 │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config:
TSLint
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
> ESLint + Prettier
配置保存自动修复eslint错误
在没有做任何配置时，此时，如果出现不符合eslint规则的代码，会出现以下1 error potentially fixable with the '--fix' option.报错:
error in ./src/main.ts
Module Error (from ./node_modules/eslint-loader/index.js):
error: Replace `h` with `(h)` (prettier/prettier) at src\main.ts:19:11:
17 | router,
18 | store,
> 19 | render: h => h(App)
| ^
20 | }).$mount("#app");
21 |
1 error found.
1 error potentially fixable with the `--fix` option.
@ multi (webpack)-dev-server/client?http://10.21.27.126:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
因此需要在eslint配置上增加--fix选项：
在项目根目录增加vue.config.js
//vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule("eslint")
.use("eslint-loader")
.loader("eslint-loader")
.tap(options => {
options.fix = true;
return options;
});
}
};
然后重启服务，即执行npm run serve,此时就可以保存自动修复eslint问题了。
配置保存自动格式化
我们安装了prettier插件，但是保存时代码并没有自动格式化，因为我们没有对编辑器vscode进行配置。
配置eslint启用prettier
在根目录的.eslintrc.js中，在extends数组中增加plugin:prettier/recommended，这将在ESLint中启用Prettier支持：
//.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: [
"plugin:vue/essential",
"@vue/prettier",
"@vue/typescript",
"plugin:prettier/recommended" // add prettier-eslint plugin which will uses the `.prettierrc.js` config
],
rules: {
//'prettier/prettier': 'error',
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
},
parserOptions: {
parser: "@typescript-eslint/parser"
},
overrides: [
{
files: ["**/__tests__/*.{j,t}s?(x)"],
env: {
mocha: true
}
}
]
};
在根目录新建.prettierrc.js，定义项目格式化代码的规则，比如：
//.prettierrc.js
module.exports = {
printWidth: 120,
tabWidth: 2,
tabs: false,
semi: true,
singleQuote: false,
quoteProps: 'as-needed',
tailingComma: 'all',
bracketSpacing: true,
jsxBracketSameLine: true,
arrowParens: 'always',
htmlWhitespaceSensitivity: 'ignore',
};
配置vscode保存启动eslint、prettier
打开vscode，键盘ctrl+shift+p，输入setting，选择Open User Settings
image.png
打开编辑器设置后，在
Extensions中找到
ESLint勾选以下三项
Auto Fix On Save
Enable
-
Lint Task: Enable
image.png
找到Validate点击Edit in settings.json
image.png
打开配置文件，编辑如下：
{
"window.zoomLevel": 0,
"terminal.integrated.rendererType": "dom",
"eslint.autoFixOnSave": true,
"editor.formatOnSave": true,
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
}
],
"eslint.lintTask.enable": true,
}
到底，基本完成，我们就可以保存自动格式化代码了。