Prettier和ESLint的配置

发表于 分类于 本文字数： 2.2k 阅读时长 ≈ 2 分钟

Prettier和ESLint

在前端工程中，统一的代码风格规划更容易写出合理的、易于阅读和维护的代码。
Prettier是用来格式化代码的工具，使项目中的代码风格一致。
ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
ps:ESLint 主要功能还是监测语法是否错误，格式化功能还是交给Prettier吧。

Vue中使用Prettier和ESLint

1
2
npm install --save-dev eslint eslint-plugin-vue
npm install --save-dev eslint-config-prettier

项目根目录创建.eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = {
  extends: [
    /* vue2 配置 */
    // 'plugin:vue/recommended',
    // 'plugin:vue/essential',
    // 'plugin:vue/strongly-recommended',
    /* vue3 配置 */
    'plugin:vue/vue3-recommended',
    'plugin:vue/vue3-essential',
    'plugin:vue/vue3-strongly-recommended',
    // 解决ESLint和Prettier之间的冲突
    'prettier',
  ],
  rules: {
    /* off,0不启用  warn,1警告  eror,2报错 */
    'no-var': 2, //禁用var，用let和const代替
    'no-unused-vars': 1, //不能有声明后未被使用的变量或参数
    'no-empty': 1, // 块语句中的内容不能为空
    eqeqeq: 1, // 是否使用全等
  },
};

.vscode下创建settings.json

1
2
3
4
5
6
7
8
9
10
11
12
{
  // 保存时格式化
  "editor.formatOnSave": true,
  // 所有文件使用 prettier 格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // eslint校验哪些类型的文件
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "Vue"],
  // Vetur默认使用 eslint-plugin-vue@beta 来检测 <template>
  "vetur.validation.template": true
}

项目根目录创建.prettierrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//.prettierrc.js
module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 用制表符代替空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号代替双引号
  singleQuote: false,
  // jsx中是否使用单引号替代双引号
  jsxSingleQuote: false,
  // 末尾使用逗号
  trailingComma: "none",
  // 大括号内的首尾需要空格 { foo: bar }
  bracketSpacing: true,
  //把多行HTML (HTML, JSX, Vue, Angular)元素的>放在最后一行的末尾，而不是单独放在下一行(不适用于自关闭元素)。
  bracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: "always",
  // 是否使用根目录下的EditorConfig配置文件
  useEditorConfig: false
};

修改.prettierrc.js配置后，重启生效！
配置ESLint和Prettier忽略文件
根目录下创建.eslintrc.js和.prettierignore

写在最后

这里的代码风格规范，其他框架只需要稍加修改，同样适用