ESLint 配置(二)Standard 和 Prettier
使用 standard
使用 standard 定义的规则,并根据自己的需要进行修改
安装 standard:https://github.com/standard/eslint-config-standard
会安装以下插件:
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
在 .eslintrc.js 中配置:
"extends": ["eslint:recommended","standard"]
standard 要求不加分号,我也不想在代码中出现 alert,所以在 rules 中添加以下两条规则:
"rules": {
"semi": ["error", "always"],
"no-alert": "error"
}
将 prettier 和 ESLint 配合使用
需要安装的插件:
-
prettier
-
eslint-plugin-prettier:配置 eslint 使用 prettier 对代码进行格式化
-
eslint-config-prettier:关闭一些不必要的或者是与 prettier 冲突的 lint 选项。
在项目根目录添加一个 .prettierrc.js
,用来自定义格式化的风格,所有的属性在 这里 可以查到。
module.exports = {
printWidth: 120, //一行的字符数换行
tabWidth: 2, //一个tab代表几个空格数
useTabs: false, //是否使用tab进行缩进
singleQuote: true, //字符串是否使用单引号
semi: true, //行尾是否使用分号,默认为true
trailingComma: 'none', //是否使用尾逗号
bracketSpacing: true, //对象大括号直接是否有空格,默认为true,效果:{ foo: bar }
endOfLine:"auto" // 保留在 Windows 和 Unix 下的换行符
};
在这里面配置句尾强制添加分号(semi: true
),可以去掉 eslint rule 里面的 "semi": ["error", "always"]
在 VSCode 中安装 ESLint、Prettier 插件
prettier 快捷键为 alt+shift+f。
如果 ESLint 检测到错误的话,会在 VSCode 的左下角进行提示: