在 Vue + Typescript 项目中使用 eslint 和 Prettier 的配置

先扔出 eslint 的基本配置，能跑通：

.eslintrc.js 

module.exports = {
     /* 指定如何解析语法。可以为空，但若不为空，只能配该值，原因见下文。*/
    parser: 'vue-eslint-parser', 
    /* 扩展配置，加一些插件 */            
    extends: [
        'plugin:vue/recommended',              /* eslint应用在vue的必须配置 */
        'plugin:prettier/recommended'          /* 使用Prettier */
    ],
    /* 优先级低于parse的语法解析配置 */
    parserOptions: {
        parser: '@typescript-eslint/parser',   /* 解析ts语法 */
        ecmaVersion: 2018,
        sourceType: 'module'
    }
}

 

1. 分析

eslint 的原理是，先解析代码 AST 语法树，再对其分析以发现代码质量和风格问题。

因此需要指定 parser，来解析代码语法。

 

一方面，我们得让 eslint  理解 vue 的语法。因此 parser 的值需要设置为 ’vue-eslint-parser‘

推荐设置 "extends": ["plugin:vue/base"] 或 "extends": ["plugin:vue/base"] ，该设置同时设置了vue 语法解析器 和 eslint 规则

这里有个需要注意的地方，parser 不能再指定别的值，否则会报错 "Use the latest vue-eslint-parser"（https://vuejs.github.io/eslint-plugin-vue/user-guide/#faq）

 

另一方面，我们还得让 eslint 理解 typescript  的语法。所以作为补充，需要添加配置 parserOptions: { parser: '@typescript-eslint/parser' }

 

2. Prettier 配置

我们知道，eslint 解决代码质量问题（语法、重复引入、无用变量等）和部分代码风格问题（缩进等）。Prettier 解决格式美化问题（换行，句尾分号等）。

所以有些情况下 Prettier 和 eslint 是重复的。我们需要解决重复冲突，最好再把 Prettier 解析出的问题作为 eslint 的问题输出。

我们可以通过设置 "extends": [ "prettier" ]，用 eslint-config-prettier 解决冲突重复。再用 eslint-plugin-prettier 将 prettier 的输出放到 eslint 中，对应设置是 { "plugins": ["prettier"], "rules": { "prettier/prettier": "error"  } }，但是这样很麻烦。

简便的替代做法是设置 "extends": ["plugin:prettier/recommended"] ，和上面效果相同。

这也是 eslint 推荐的引入 Prettier 的配置。

 

3. 关于 eslint 的配置字段： extend 和 plugin 的区别

配置字段名称	对应解析npm包名	内容	rule 差别
plugin	eslint-plugin-xxx	插件	rule 返回对象 {create:{}}，其中可使用上下文 AST 作为传参
extend	eslint-config-xxx	配置	rule 直接返回 0/1/2 或 off/error 等最终结果