vue eslint和prettier集成

前端
3.9k 词

介绍

这几天公司前端项目需要做静态代码扫描，去做了一下研究。vue 端主要还是通过 eslint 来实现静态代码扫描，在 vscode 端用 prettier 来做代码保存自动格式化的一个过程。

eslint: 用于扫描代码，提示一些代码质量上存在的通用性问题。
prettier：用于代码格式化，保证多 pc 端多软件之间的代码格式规范化工具。

项目集成 eslint

参考地址为： https://eslint.nodejs.cn/docs/latest/use/getting-started
当前版本： v8.50

在项目根目录下，命令行输入如下命令，可以进入交互式的 init 过程

1
npm init @eslint/config

初始化完成后，根目录下会出现一个.eslintrc.{js,yml,json}文件， 这里建议为 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
module.exports = {
  env: {
    browser: true, //浏览器环境使用
  },
  extends: [
    //'standard', // 继承标准规则
    "plugin:vue/vue3-recommended", // vue3项目标准
    "prettier", // 这个是prettier兼容，后面的规则会顶掉前面的，自定义的rules会覆盖掉这里的
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: 2021, // es6 2021标准
    sourceType: "module",
  },
  globals: {
    //允许出现的全局变量
    window: true,
    Component: true, // 注册组件
    Behavior: true, // 注册行为
    requirePlugin: true, // 引入插件
    postMessage: true, // 向 Worker 线程发送消息
    onmessage: true, // 监听 Worker 线程的消息
    self: true, // Worker 线程全局对象
    importScripts: true, // 引入第三方库
    onerror: true, // 监听错误
    onmessageerror: true, // 监听 Worker 线程消息错误
    close: true, // 关闭 Worker 线程
    open: true, // 创建 Worker 线程
    XMLHttpRequest: true, // ajax
    FormData: true, // ajax
    FileReader: true, // ajax
    setInterval: true, // 定时器
    setTimeout: true, // 定时器
    clearInterval: true, // 定时器
    clearTimeout: true, // 定时器
    Image: true, // 图片
    Audio: true, // 音频
    WebSocket: true, // WebSocket
    IntersectionObserver: true, // 监听节点是否进入屏幕可视区域
    Promise: true, // Promise
  },
  rules: {
    //自定义规范，具体参考 https://zh-hans.eslint.org/docs/latest/use/configure/rules
    indent: ["error", 2],
    eqeqeq: "warn",
    "no-debugger": "error",
    "no-tabs": "off",
    "space-before-function-paren": "off",
    "object-curly-spacing": "off",
    "no-mixed-spaces-and-tabs": "off",
    "no-useless-concat": "off",
    "no-void": "off",
    "no-new": "off",
    "no-new-func": "off",
    "accessor-pairs": "off",
    "spaced-comment": "off",
    camelcase: "warn",
    "no-useless-escape": "warn",
    "new-cap": "warn",
    "no-useless-call": "warn",
    "no-unused-expressions": "warn",
    "no-new-wrappers": "warn",
    "no-array-constructor": "warn",
    "no-plusplus": "off",
    "no-nested-ternary": "off",
    "semi-spacing": "off",
    semi: "off",
    "vue/multi-word-component-names": "off",
  },
};

然后再 package.json 文件中，如果没有，可以添加如下命令：

1
2
3
4
"scripts": {
    "lint": "eslint --ext .js,.vue src",
    "lint:fix": "eslint --ext .js,.vue src --fix"
  },

这时，你可以用 yarn lint:fix 来对全局代码做一个修复

项目集成 prettier

prettier 的中文官网是： https://www.prettier.cn/
prettier 的集成其实也差不多

命令如下， 注 exact 为精确版本安装

1
yarn add --dev --exact prettier

添加后需要手动在工程下添加.prettierrc{.js,.json}文件，这里依然是建议用 js

.prettierrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = {
  printWidth: 160, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: false, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: "as-needed", //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: "none", //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: "always", //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: "preserve", //不知道怎么翻译
  htmlWhitespaceSensitivity: "ignore", //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: "lf", //结束行形式
  embeddedLanguageFormatting: "auto", //对引用代码进行格式化
};

prettier 的配置文件比较简单，可以去 https://www.prettier.cn/playground/ 试一试效果

然后在 package.json 添加如下

1
2
3
"scripts": {
    "prettier:all": "prettier --write .",
  },

vscode 集成 eslint 和 prettier

需要添加如下两个插件
图片
图片

vscode 添加保存格式化
图片