Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式

更新時間：2023年06月29日 16:50:39 作者：失眠時間

這篇文章主要介紹了Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

前言

開發(fā)規(guī)范可以很好避免奇奇怪怪的問題
避免多人開發(fā)習慣不同的情況
避免提交代碼出現(xiàn)的各種合并問題
幫助快速找到指定位置的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文件引入插件使其在構(gòu)建和編譯時生效

...
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文件配置，也可根據(jù)個人實際習慣優(yōu)化配置

{
  "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 文件來達到規(guī)范校驗

.eslintrc.cjs文件配置開發(fā)規(guī)范（配置同上package.json的eslintConfig內(nèi)容）

// /* 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 配置文件。它定義了項目的語法環(huán)境、擴展和規(guī)則等信息，以便在編碼過程中進行語法檢查和風格統(tǒng)一
module.exports = {
  root: true,//root: true 表示這是 eslint 的根配置文件。
  env: { //env: { node: true } 聲明該代碼運行于 node.js 環(huán)境。
    node: false
  },
  extends: [ //extends 屬性包含了一些預定義的規(guī)則集合，用于保證代碼的質(zhì)量和風格一致性。
    'plugin:vue/vue3-essential',// 使 eslint 支持 vue 3 模板。
    'eslint:recommended', //啟用 eslint 推薦的規(guī)則。
    '@vue/typescript/recommended',//添加 typescript 相關(guān)的推薦規(guī)則集。
    '@vue/prettier', //是為了與 prettier 集成，保證代碼格式的一致性。
    // '@vue/prettier/@typescript-eslint' //是為了與 prettier 集成，保證代碼格式的一致性。
  ],
  parserOptions: { //屬性聲明了使用的 ecmascript 版本。
    ecmaVersion: 2020
  },
  rules: { //屬性定義了一些自定義的規(guī)則，如不允許在生產(chǎn)環(huán)境下使用 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', // 多行對象和數(shù)組的最后一個元素后面是否添加逗號（都添加）
        printWidth: 80, // 超過 80 個字符時換行
        tabWidth: 2, // 使用 2 個空格縮進
      }
    ]
  },
  overrides: [ //屬性定義了針對某些特定文件或目錄的覆蓋規(guī)則，如指定 mocha 測試相關(guān)的語法環(huán)境。
    {
      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
      env: {
        mocha: true
      }
    }
  ]
}

.prettierrc.js文件配置開發(fā)格式（配置同上package.json的prettier內(nèi)容，.eslintrc.cjs文件rules的’prettier/prettier’）

module.exports = {
    singleQuote: true, // 使用單引號
    semi: true, // 在語句的末尾打印分號
    trailingComma: 'all', // 多行對象和數(shù)組的最后一個元素后面是否添加逗號（都添加）
    printWidth: 80, // 超過 80 個字符時換行
    tabWidth: 2, // 使用 2 個空格縮進
  };