背景: 使用的是vue/cli创建的支付宝小程序项目
话不多说上菜
- 安装eslint ,因为项目中使用的是cli搭建的,所以直接使用 vue add @vue/eslint
vue add @vue/eslint
然后根据自己喜好选择风格,这里我选择的是prettier - 配置.eslintrc.js
在项目根目录新建文件.eslintrc.js,根据自己需求配置规则
module.exports = {
root: true,
env: {
node: true,
},
globals: {
uni: "readonly",
my:"readonly"
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: "babel-eslint",
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-sequences": 0,
"import/named": 0,
"no-useless-concat": 0,
"no-unreachable": 0,
"no-case-declarations": 0,
"no-continue": 0,
"no-redeclare": 0,
"block-scoped-var": 0,
"operator-assignment": 0,
"no-multi-assign": 0,
"comma-dangle": 0,
"prefer-const": 0,
"semi": 0,
"eol-last": 0,
"linebreak-style": 0,
"no-unused-vars": 0,
"no-useless-computed-key": 0,
"default-case": 0,
"prefer-destructuring": 0,
"arrow-parens": 0,
'no-var': 2, // 要求使用 let 或 const 而不是 var
"comma-spacing": 0,
"no-mixed-operators": 0,
"radix": 0,
"prefer-promise-reject-errors": 0,
"arrow-body-style": 0,
"prefer-rest-params": 0,
"no-restricted-syntax": 0,
"vars-on-top": 0,
"import/no-named-as-default": 0,
"import/extensions": 0,
"import/no-named-as-default-member": 0,
"guard-for-in": 0,
"no-unused-expressions": 0,
"import/prefer-default-export": 0,
"no-shadow": 0,
"no-nested-ternary": 0,
"no-empty": 0,
"eqeqeq": 0,
"camelcase": 0,
"prefer-template": 0,
"dot-notation": 0,
"prefer-arrow-callback": 0,
"no-plusplus": 0,
"no-else-return": 0,
"one-var-declaration-per-line": 0,
"consistent-return": 0,
"no-param-reassign": 0,
"max-len": 0,
"no-lonely-if": 0,
"array-callback-return": 0,
"prefer-object-spread": 0,
"import/order": 0,
"import/newline-after-import": 0,
"func-names": 0,
"no-console": 0,
"no-underscore-dangle": 0,
"no-useless-escape": 0
},
};
- 配置eslint不用检查的文件 .eslintignore
根目录 新建文件.eslintignore ,根据实际需求配置
/utils
/subpackage/utils
/node_modules
/postcss.config.js
/babel.config.js
- 最后配置.prettierrc.js
根目录新建.prettierrc.js文件,根据实际需求配置
//配置 prettier 。prettierrc.js
module.exports = {
// 单行最大长度
printWidth: 100,
// 设置编辑器每一个水平缩进的空格数
tabWidth: 2,
// 在句尾添加分号
semi: true,
// 使用单引号
singleQuote: true,
jsxSingleQuote: true,
// 在任何可能的多行中输入尾逗号。
trailingComma: 'all',
// 在对象字面量声明所使用的的花括号后({)和前(})输出空格
bracketSpacing: true,
// 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行(不适用于自闭和元素)
jsxBracketSameLinte: false,
// 为单行箭头函数的参数添加圆括号。
alwaysParens: 'always',
// 行结束
endOfLine:"auto",
vueIndentScriptAndStyle: true, //是否缩进Vue 文件中的代码<script>和<style>标签
htmlWhitespaceSensitivity:'ignore',//HTML 空白敏感度
};
最后一步在package.json文件中修改一下lint的命令,修改为
"lint": "eslint --fix --ext .js,.vue src",
使用当有问题的时候就报错啦
这些警告不用担心,执行一下npm run lint 会自己修复的
修复后