Vite+TS+Vue开启eslint和prettier规范及校验

---

前言

开发规范可以很好避免奇奇怪怪的问题
避免多人开发习惯不同的情况
避免提交代码出现的各种合并问题
帮助快速找到指定位置的bug

---

一、安装依赖

需要先安装以下依赖
vite-plugin-eslint
@vue/eslint-config-prettier
@vue/eslint-config-typescript
@vue/cli-plugin-eslint
eslint
eslint-config-prettier
eslint-plugin-prettier
eslint-plugin-vue
prettier
vite-plugin-eslint

二、配置使用

• vite.config.ts文件引入插件使其在构建和编译时生效

...
import eslintPlugin from 'vite-plugin-eslint'
import {
    
     defineConfig } from 'vite'
export default defineConfig(({
    
     command, mode }) => {
    
    
  return {
    
    
  	...
    plugins: [
      eslintPlugin({
    
    
        include: ['src/**/*.ts', 'src/**/*.js', 'src/**/*.vue', 'src/*.ts', 'src/*.js', 'src/*.vue']
      }),
    ]
    ...
  }
})

• 并在package.json文件配置，也可根据个人实际习惯优化配置

{
    
    
  "eslintConfig": {
    
    
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier"
    ],
    "plugins": [
      "@typescript-eslint",
      "prettier"
    ],
    "parserOptions": {
    
    
      "parser": "@typescript-eslint/parser"
    },
    "rules": {
    
    
      "no-console": "off",
      "no-debugger": "off",
      "prettier/prettier": "error"
    }
  },
  "prettier": {
    
    
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all",
    "printWidth": 80,
    "tabWidth": 2
  }
}

也可配置 .eslintrc.cjs 文件来达到规范校验

• .eslintrc.cjs文件配置开发规范（配置同上package.json的eslintConfig内容）

// /* eslint-env node */
// require('@rushstack/eslint-patch/modern-module-resolution')

// module.exports = {
    
    
//   root: true,
//   'extends': [
//     'plugin:vue/vue3-essential',
//     'eslint:recommended',
//     '@vue/eslint-config-typescript',
//     '@vue/eslint-config-prettier'
//   ],
//   parserOptions: {
    
    
//     ecmaVersion: 'latest',
//     parser: '@typescript-eslint/parser',
//   },
// }
// javascript 代码风格检查工具 eslint 配置文件。它定义了项目的语法环境、扩展和规则等信息，以便在编码过程中进行语法检查和风格统一
module.exports = {
    
    
  root: true,//root: true 表示这是 eslint 的根配置文件。
  env: {
    
     //env: { node: true } 声明该代码运行于 node.js 环境。
    node: false
  },
  extends: [ //extends 属性包含了一些预定义的规则集合，用于保证代码的质量和风格一致性。
    'plugin:vue/vue3-essential',// 使 eslint 支持 vue 3 模板。
    'eslint:recommended', //启用 eslint 推荐的规则。
    '@vue/typescript/recommended',//添加 typescript 相关的推荐规则集。
    '@vue/prettier', //是为了与 prettier 集成，保证代码格式的一致性。
    // '@vue/prettier/@typescript-eslint' //是为了与 prettier 集成，保证代码格式的一致性。
  ],
  parserOptions: {
    
     //属性声明了使用的 ecmascript 版本。
    ecmaVersion: 2020
  },
  rules: {
    
     //属性定义了一些自定义的规则，如不允许在生产环境下使用 console 和 debugger 语句。
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier/prettier': [
      'warn',
      {
    
    
        singleQuote: true, // 使用单引号
        semi: false, // 在语句的末尾打印分号
        trailingComma: 'all', // 多行对象和数组的最后一个元素后面是否添加逗号（都添加）
        printWidth: 80, // 超过 80 个字符时换行
        tabWidth: 2, // 使用 2 个空格缩进
      }
    ]
  },
  overrides: [ //属性定义了针对某些特定文件或目录的覆盖规则，如指定 mocha 测试相关的语法环境。
    {
    
    
      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
      env: {
    
    
        mocha: true
      }
    }
  ]
}

.prettierrc.js文件配置开发格式（配置同上package.json的prettier内容，.eslintrc.cjs文件rules的’prettier/prettier’）

module.exports = {
    
    
    singleQuote: true, // 使用单引号
    semi: true, // 在语句的末尾打印分号
    trailingComma: 'all', // 多行对象和数组的最后一个元素后面是否添加逗号（都添加）
    printWidth: 80, // 超过 80 个字符时换行
    tabWidth: 2, // 使用 2 个空格缩进
  };

配置了 .eslintrc.cjs 文件后可以看到更多的规范需要处理，

Vue编译处理： warning Delete ␍ prettier/prettier 提示
git 自动把换行符LF(linefeed character) 转换成回车符CRLF(carriage-return character)
点击下图右下角的CRLF修改为LF即可

---