執(zhí)行命令: yarn create vite
? Project name: 輸入你的項目名稱？（如: esvue）
? Select a framework: 選擇安裝的腳手架 (這里選vue)
    vanilla
>   vue
    react
Done. Now run:
  cd esvue
  yarn
  yarn dev

yarn add -D eslint

npx eslint --init

You can also run this command directly using 'npm init @eslint/config'.
? 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

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

? Would you like to install them now? ? No / Yes

? Which package manager do you want to use? ...
  npm
> yarn
  pnpm

// .eslintrc.js 文件
// 這里就是上面3步驟初始化的文件,后面的配置都寫這里
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: "eslint:recommended",
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
  }
}

// 說明: 該包是用于配置vite運行的時候自動檢測eslint規(guī)范
// 問題: 不裝這個包可以嗎? 答案是“可以的”,使用yarn dev時并不會主動檢查代碼
yarn add -D vite-plugin-eslint

yarn add -D @babel/core             
yarn add -D @babel/eslint-parser

yarn add -D prettier
yarn add -D eslint-config-prettier // eslint兼容的插件
yarn add -D eslint-plugin-prettier // eslint的prettier

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint' //導(dǎo)入包

export default defineConfig({
  plugins: [
    vue(),
    // 增加下面的配置項,這樣在運行時就能檢查eslint規(guī)范
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    })
  ]
})

// 在項目根目錄創(chuàng)建文件 .prettierrc
// 以下配置視自己情況而定,并步是每個都需要的
{
  tabWidth: 4,               // 使用4個空格縮進
  semi: false,               // 代碼結(jié)尾是否加分號
  trailingComma: 'none',     // 代碼末尾不需要逗號
  singleQuote: true,         // 是否使用單引號
  printWidth: 100,           // 超過多少字符強制換行
  arrowParens: 'avoid',      // 單個參數(shù)的箭頭函數(shù)不加括號 x => x
  bracketSpacing: true,      // 對象大括號內(nèi)兩邊是否加空格 { a:0 }
  endOfLine: 'auto',         // 文件換行格式 LF/CRLF
  useTabs: false,            // 不使用縮進符,而使用空格
  quoteProps: 'as-needed',   // 對象的key僅在必要時用引號
  jsxSingleQuote: false,     // jsx不使用單引號,而使用雙引號
  jsxBracketSameLine: false, // jsx標(biāo)簽的反尖括號需要換行
  rangeStart: 0,             // 每個文件格式化的范圍是文件的全部內(nèi)容
  rangeEnd: Infinity,        // 結(jié)尾
  requirePragma: false,      // 不需要寫文件開頭的 @prettier
  insertPragma: false,       // 不需要自動在文件開頭插入 @prettier
  proseWrap: 'preserve',     // 使用默認的折行標(biāo)準
  htmlWhitespaceSensitivity: 'css'  // 根據(jù)顯示樣式?jīng)Q定html要不要折行
}

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",         // 使用推薦的eslint
        'plugin:vue/vue3-recommended' // 使用插件支持vue3
         // 如果你沒有安裝第7步,以下兩個包不要引入,否則報錯 
        'plugin:prettier/recommended', 
        'eslint-config-prettier'
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "sourceType": "module",
        "ecmaFeatures": {
            "modules": true,
            'jsx': true
        },
        "requireConfigFile": false,
        "parser": '@babel/eslint-parser'
    },
    // eslint-plugin-vue 
    'plugins': [
        'vue'      // 引入vue的插件 vue <==> eslint-plugin-vue 
        // 這個包需要安裝了第7步的三個包再引入
        'prettier' // 引入規(guī)范插件  prettier <==>  eslint-plugin-prettier
    ],
    'globals': {
        defineProps: 'readonly',
        defineEmits: 'readonly',
        defineExpose: 'readonly',
        withDefaults: 'readonly'
    },
    // 這里時配置規(guī)則的,自己看情況配置
    "rules": {
        'semi': ['warn', 'never'],           // 禁止尾部使用分號
        'no-console': 'warn',                // 禁止出現(xiàn)console
        'no-debugger': 'warn',               // 禁止出現(xiàn)debugger
        'no-duplicate-case': 'warn',         // 禁止出現(xiàn)重復(fù)case
        'no-empty': 'warn',                  // 禁止出現(xiàn)空語句塊
        'no-extra-parens': 'warn',           // 禁止不必要的括號
        'no-func-assign': 'warn',            // 禁止對Function聲明重新賦值
        'no-unreachable': 'warn',            // 禁止出現(xiàn)[return|throw]之后的代碼塊
        'no-else-return': 'warn',            // 禁止if語句中return語句之后有else塊
        'no-empty-function': 'warn',         // 禁止出現(xiàn)空的函數(shù)塊
        'no-lone-blocks': 'warn',            // 禁用不必要的嵌套塊
        'no-multi-spaces': 'warn',           // 禁止使用多個空格
        'no-redeclare': 'warn',              // 禁止多次聲明同一變量
        'no-return-assign': 'warn',          // 禁止在return語句中使用賦值語句
        'no-return-await': 'warn',           // 禁用不必要的[return/await]
        'no-self-compare': 'warn',           // 禁止自身比較表達式
        'no-useless-catch': 'warn',          // 禁止不必要的catch子句
        'no-useless-return': 'warn',         // 禁止不必要的return語句
        'no-mixed-spaces-and-tabs': 'warn',  // 禁止空格和tab的混合縮進
        'no-multiple-empty-lines': 'warn',   // 禁止出現(xiàn)多行空行
        'no-trailing-spaces': 'warn',        // 禁止一行結(jié)束后面不要有空格
        'no-useless-call': 'warn',           // 禁止不必要的.call()和.apply()
        'no-var': 'warn',                    // 禁止出現(xiàn)var用let和const代替
        'no-delete-var': 'off',              // 允許出現(xiàn)delete變量的使用
        'no-shadow': 'off',                  // 允許變量聲明與外層作用域的變量同名
        'dot-notation': 'warn',              // 要求盡可能地使用點號
        'default-case': 'warn',              // 要求switch語句中有default分支
        'eqeqeq': 'warn',                    // 要求使用 === 和 !==
        'curly': 'warn',                     // 要求所有控制語句使用一致的括號風(fēng)格
        'space-before-blocks': 'warn',       // 要求在塊之前使用一致的空格
        'space-in-parens': 'warn',           // 要求在圓括號內(nèi)使用一致的空格
        'space-infix-ops': 'warn',           // 要求操作符周圍有空格
        'space-unary-ops': 'warn',           // 要求在一元操作符前后使用一致的空格
        'switch-colon-spacing': 'warn',      // 要求在switch的冒號左右有空格
        'arrow-spacing': 'warn',             // 要求箭頭函數(shù)的箭頭前后使用一致的空格
        'array-bracket-spacing': 'warn',     // 要求數(shù)組方括號中使用一致的空格
        'brace-style': 'warn',               // 要求在代碼塊中使用一致的大括號風(fēng)格
        'camelcase': 'warn',                 // 要求使用駱駝拼寫法命名約定
        'indent': ['warn', 4],               // 要求使用JS一致縮進4個空格
        'max-depth': ['warn', 4],            // 要求可嵌套的塊的最大深度4
        'max-statements': ['warn', 100],     // 要求函數(shù)塊最多允許的的語句數(shù)量20
        'max-nested-callbacks': ['warn', 3], // 要求回調(diào)函數(shù)最大嵌套深度3
        'max-statements-per-line': ['warn', { max: 1 }],   // 要求每一行中所允許的最大語句數(shù)量
        "quotes": ["warn", "single", "avoid-escape"],      // 要求統(tǒng)一使用單引號符號
        "vue/require-default-prop": 0,                     // 關(guān)閉屬性參數(shù)必須默認值
        "vue/singleline-html-element-content-newline": 0,  // 關(guān)閉單行元素必須換行符
        "vue/multiline-html-element-content-newline": 0,   // 關(guān)閉多行元素必須換行符
        // 要求每一行標(biāo)簽的最大屬性不超五個
        'vue/max-attributes-per-line': ['warn', { singleline: 5 }],
        // 要求html標(biāo)簽的縮進為需要4個空格
        "vue/html-indent": ["warn", 4, {
            "attribute": 1,
            "baseIndent": 1,
            "closeBracket": 0,
            "alignAttributesVertically": true,
            "ignores": []
        }],
        // 取消關(guān)閉標(biāo)簽不能自閉合的限制設(shè)置
        "vue/html-self-closing": ["error", {              
            "html": {
                "void": "always",
                "normal": "never",
                "component": "always"
            },
            "svg": "always",
            "math": "always"
        }]   
    }
}

// 配置vscode
// 打開：設(shè)置 -> 文本編輯器 -> 字體 -> 在 settings.json 中編輯
// settings.json文件
{
 // vscode默認啟用了根據(jù)文件類型自動設(shè)置tabsize的選項
 "editor.detectIndentation": false,
 // 重新設(shè)定tabsize
 "editor.tabSize": 2,
 // 每次保存的時候自動格式化 
 "editor.formatOnSave": true,
 // 每次保存的時候?qū)⒋a按eslint格式進行修復(fù)
 "eslint.autoFixOnSave": true,
 // 添加vue支持
 "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
           "language": "vue",
           "autoFix": true
      }
 ],
 // #讓prettier使用eslint的代碼格式進行校驗 
 "prettier.eslintIntegration": true
}

"devDependencies": {
    // eslint解析相關(guān)的包
    "@babel/core": "^7.18.2",
    "@babel/eslint-parser": "^7.18.2",
    // eslint相關(guān)的包
    "eslint": "^8.17.0",
    "eslint-plugin-vue": "^9.1.0",
    "vue-eslint-parser": "^9.0.2",
    "vite-plugin-eslint": "^1.6.1",
    // prettier相關(guān)的包
    "prettier": "^2.6.2",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
  }