1、安装项
安装
yarn add eslient 或 npm i -g eslient
yarn add prettier
yarn add eslint-plugin-prettier
yarn add eslint-plugin-html
yarn add eslint-bable
2、以vscode为例,vscode提供了大量的插件,使用Prettier插件搭配eslint插件使用。
3、新建.eslintrc.js配置规则,也可以在package.json中配置,以.eslintrc.js为例
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
parserOptions: {
parser: 'babel-eslint',
},
extends: ['eslint:recommended', 'plugin:vue/recommended'],
// required to lint *.vue files
plugins: ['vue', 'prettier'],
// add your custom rules here
rules: {
'indent': 1, // 缩进
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 待定
'vue/html-closing-bracket-newline': [
'error',
{
singleline: 'never',
multiline: 'always',
},
],
'vue/require-default-prop': 0,
'vue/require-prop-types': 0,
'vue/no-side-effects-in-computed-properties': 1,
'vue/require-component-is': 0,
'vue/no-use-v-if-with-v-for': 0,
},
};
4、配置vscode,在首选项-用户设置-settings.json中添加一下代码
"eslint.autoFixOnSave": true,
"eslint.options": {
"plugins": ["vue", "html", "ts"]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
],
如果还是不好使,需要在设置里勾选format on save
这样,就可以实现代码风格的统一,当我们保存代码的时候,就会自动修复代码格式了