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 配合使用

需要安装的插件:

在项目根目录添加一个 .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 的左下角进行提示:

参考

posted @ 2020-05-29 17:07  Ainsliaea  阅读(4934)  评论(0编辑  收藏  举报