Vite+TS+Vue opens eslint and prettier specifications and verification

---

foreword

Development specifications can avoid strange problems,
avoid situations where multiple people have different development habits,
avoid various merging problems in submitting code,
and help quickly find bugs in specified locations

---

1. Installation dependencies

The following dependencies need to be installed first
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

Two, configuration and use

• vite.config.tsThe file introduces the plug-in to take effect at build and compile time

...
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']
      }),
    ]
    ...
  }
})

• And in package.jsonthe file configuration, you can also optimize the configuration according to your actual habits

{
    
    
  "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
  }
}

You can also configure .eslintrc.cjsthe file to achieve specification verification

• .eslintrc.cjsFile configuration development specification (configuration as package.jsonabove 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.jsFile configuration development format (configure the same package.jsoncontent as above prettier, .eslintrc.cjsthe file'prettier rules/prettier')

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

After configuring .eslintrc.cjsthe file, you can see that more specifications need to be processed.

Vue compilation processing: warning Delete ␍Prompt git to automatically convert the newline character prettier/prettierinto a carriage return character , click the modification in the lower right corner of the figure below
LF(linefeed character)CRLF(carriage-return character)
CRLFLF

---