Vue3 + Vite + Ts 项目 配置代码格式化及校验 eslint + prettier + standard

全局安装eslint（已安装过可忽略）

npm install eslint -g

项目中安装eslint

# yarn 安装
yarn add eslint -D

# npm 安装
npm i eslint -D

安装完成后，在项目根目录下创建.eslintrc.js文件，或者使用eslint --init初始化命令自动生成.eslintrc.js文件（ps：下面详细介绍初始化步骤）

eslint初始化

eslint --init

? How would you like to use ESLint? ... 
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style

? What type of modules does your project use? ... 
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? ... 
  React
> Vue.js
  None of these

? Does your project use TypeScript? » No / Yes

选择推荐风格，这里我们直接选第一个跟着引导去选择aribn或者standard (本文中案例使用了standard)

> Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

What format do you want your config file to be in? · JavaScript

# 选择yes
? The style guide "standard" requires eslint@^7.12.1. You are currently using eslint@8.12.0.
  Do you want to downgrade? » No / Yes

? Would you like to install them now with npm? » No / Yes

选择yes后，会自动安装一些eslint相关的依赖包，默认是用npm安装，安装完会自动生成一个.eslintrc.js文件。如果不想用npm 安装，可以选择no，然后自行安装

// package.json
"devDependencies": {
    ...
    "@typescript-eslint/eslint-plugin": "^5.16.0",
    "@typescript-eslint/parser": "^5.16.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.2.0",
    "eslint-plugin-vue": "^8.5.0"
}

自动生成的.eslintrc.js文件内容如下：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
  }
}

配置prettier

使用命令安装prettier

yarn add prettier -D

在.eslintrc.js文件的extends最后加上plugin:prettier/recommended（PS：extends 的顺序后面会覆盖前面，prettier的配置必须放在最后) 在plugins中加上@vue/prettier

// .eslintrc.js文件
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'plugin:vue/essential', 
    'standard', 
    'plugin:prettier/recommended' // ++ prettier配置
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue', 
    '@typescript-eslint',
    '@vue/prettier' // ++ prettier配置
  ],
  rules: {},
};

解决eslint和prettier的冲突

使用eslint-config-prettier -D命令安装 eslint-config-prettier

eslint-plugin-prettier插件会调用prettier对项目的代码风格进行检查，其原理是先使用prettier对代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被prettier进行标记。

接下来，在rules中添加，"prettier/prettier": "error"，表示被prettier标记的地方抛出错误信息。

//.eslintrc.js
{
  "plugins": ['vue', '@typescript-eslint', '@vue/prettier'],
  "rules": {
    "prettier/prettier": "error"
  }
}

项目下新建 .prettierrc.js 文件

module.exports = {
  printWidth: 120, //每行代码长度
  tabWidth: 2, //每个tab相当于多少个空格（默认2）
  useTabs: false,
  semi: false, //在末尾是否加分号
  singleQuote: true,
  trailingComma: 'es5', //多行使用拖尾逗号(默认none)  none-无尾逗号  es5-添加ES5中被支持的尾逗号 all-所有可能的地方都添加
  bracketSpacing: true, //对象字面量的大括号间使用空格（默认true）eg:{name:'xiaoming'} => { name:'xiaoming' }
  jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
  arrowParens: 'avoid', //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  eslintIntegration: false,
}

项目下新建 .prettierignore

# 忽略格式化文件 (根据项目需要自行添加)
node_modules
dist

继续配置.eslintrc.js文件，使ts、vue3的代码可以被识别并格式化

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  parser: 'vue-eslint-parser',// ++ vue代码相关配置
  extends: [
    'plugin:plugin:vue/vue3-recommended',// --> vue3代码相关配置
    'standard', 
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue', 
    '@typescript-eslint',
    '@vue/prettier'// ++ vue代码相关配置
  ],
  rules: {
    'vue/multi-word-component-names': 0,// ++ 关闭.vue文件必须是大驼峰命名的校验
    'prettier/prettier': [
      'error',
      {
        trailingComma: 'es5',
        singleQuote: true,
      },
    ],
  },
}

package.json 配置

 "scripts": {
    ...
    "lint": "eslint --fix --ext \"src/**/*.{js,vue,ts}\"",
    "prettier": "prettier --write ."
  },

上面配置完成后,可以运行以下命令测试下代码检查个格式化效果:

# eslint 检查
yarn lint
# prettier 自动格式化
yarn prettier

剩余个性化rules待更新...

最终版配置

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  parser: 'vue-eslint-parser',
  extends: ['plugin:plugin:vue/vue3-recommended', 'standard', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/multi-word-component-names': 0,
    'prettier/prettier': [
      'error',
      {
        trailingComma: 'es5',
        singleQuote: true,
      },
    ],
  },
  globals: {
    defineProps: 'readonly',
  },
}

// .prettierrc.js
module.exports = {
  printWidth: 120, //每行代码长度
  tabWidth: 2, //每个tab相当于多少个空格（默认2）
  useTabs: false,
  semi: false, //在末尾是否加分号
  singleQuote: true,
  trailingComma: 'es5', //多行使用拖尾逗号(默认none)  none-无尾逗号  es5-添加ES5中被支持的尾逗号 all-所有可能的地方都添加
  bracketSpacing: true, //对象字面量的大括号间使用空格（默认true）eg:{name:'xiaoming'} => { name:'xiaoming' }
  jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
  arrowParens: 'avoid', //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  eslintIntegration: false,
}