vue3 + TS项目配置代码规范

首先在根目录创建一个 .eslintrc.js

module.exports = {
  parser: '',
  parserOptions: {},
  env: {},
  plugins: [],
  extends: [],
  rules: {}
}

上面这些是最常用的配置项，一个个说

• parser

parser 是用来将 js 转化为 AST 树的，默认 parser 为 espree，但是只能处理js这些，并不能将vue 模板语法解析成对应的AST，所以需要用另外的 parser，vue3 我们使用的是 vue-eslint-parser

{
  parser: 'vue-eslint-parser'
}

问题来了，当我们用 ts 的时候，vue-eslint-parser 是没办法解析 script 中的内容的

• parserOptions

对于上面说的问题，在 vue 项目中的配置，我们选择在 parserOptions 中再加个 parser 配置项，处理 typescript 我们选择用 @typescript-eslint/parser

{
    parserOptions: {
      parser: "@typescript-eslint/parser",
      ecmaVersion: 6,  // ES 版本
      sourceType: 'module', // 引入方式
    }
 }

• env

直接使用 defineProps，defineEmits 会出现 undef 的错误，如果需要将这些指令暴露到全局环境，可以配置：

env: {
    'vue/setup-compiler-macros': true
}

• plugins，extends，rules

这三个为什么要一起讲呢，作者之前在这块绕了很久，觉得有必要做下区分

eslint 本身是用来 lint js 的，有很多预设的标准（rule）

如 semi: 'error' 表明不要分号，会报错

但是问题在于，现在的框架越来越多，jsx，typescript，vue 这些非标准的 js 语法结构该怎么定义代码规范呢，eslint 提供了接口去自定义规则，ts对应的是 eslint-plugin-vue

{
  plugins: ['vue']
}

那么这个时候，plugin中定义的规则就可以拿出来用了

{
    rules: {
       'vue/no-dupe-v-else-if': 'error',  // template 中不能出现判定条件一样的 v-else-if
    }
}

那么很多公司都会出现一些好的规则集合，发布成包，就是 extend 配置，vue 官网也有很多：plugin:vue/base，plugin:vue/vue3-recommended...

配置下

{
    extends: ['plugin:vue/vue3-recommended']
}

总结下来：

plugin 使用来自定义规则的（）
extends 是plugin中的规则集合
rules 是单个规则配置
plugin 命名方式为：eslint-plugin-myplugin，extends 命名方式为：eslint-config-myconfig
plugin经常会自带一些 extend，配置为 plugin:myplugin/...
vscode 集成
安装 vscode-eslint, vscode-prettier 插件，安装 prettier, eslint-config-prettier 包

eslint-config-prettier 是用来 eslint 与 prettier 规则冲突的
最终配置

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 6,
    sourceType: 'module',
  },
  env: {
    'vue/setup-compiler-macros': true,
  },
  plugins: ['vue'],
  extends: ['plugin:vue/vue3-recommended', 'prettier'],
  rules: {
    'no-unused-vars': 'error',
    'vue/no-dupe-v-else-if': 'error',
    'vue/script-setup-uses-vars': 'off',
  },
}