Vue3 + Eslint + prettier

一、背景

公司內部團隊大部分由多人組成，當遇到多個前端開發同一個項目時，代碼規範及代碼質量，是需要考慮的一個重中之重

二、Eslint + prettier 是什麼

ESLint 的主要功能包含代碼格式和代碼質量的校驗，而 Prettier 只是代碼格式的校驗，不會對代碼質量進行校驗。

代碼格式問題：單行代碼長度、tab 長度、空格、逗號表達式，尾部使用分號，空語句塊等問題。

代碼質量問題：未使用變量、三等號、全局變量聲明，v-for會自動追加key值，多單詞駝峯來進行組件命名等問題。

三、VsCode如何安裝

四、Vscode 如何全局配置

// 全局配置vscode
// 打開：設置 -> 文本編輯器 -> 字體 -> 在 settings.json 中編輯

{
  "prettier.configPath": ".prettierrc.json", // 以項目中.prettierrc.json文件爲準
  "editor.codeActionsOnSave": {},
  "window.zoomLevel": 1,
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
  "js/ts.implicitProjectConfig.checkJs": true,
  "prettier.requireConfig": true,
  "editor.fontLigatures": false // 代碼分割去掉了中劃線-
}

六、Vscode如何項目配置 （目錄 .vscode/settings.json）

{
  "editor.formatOnSave": true, // 每次保存的時候自動格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 爲所有語言設置prettier
  "workbench.iconTheme": "vscode-icons", // 文件小圖標
}

 

七、eslint 配置

1. 安裝eslint

npm install vite-plugin-eslint

2. 全局配置eslint插件

// vite.config.js
import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig(({ command, mode, ssrBuild }) => {
    return {
        base: '/',
        plugins: [
            eslintPlugin({
                include: ['src/**/*.vue', 'src/*.js', 'src/*.vue'] // 需要 eslint 校驗的文件
            })
        ]
    }
})

 3. eslint 與 搭配使用，還需安裝的插件 ( 參考圖片 )

npm install @babel/eslint-parser eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier vue-eslint-parser

 4. 新建4個文件（.eslintignore 和 .prettierignore 與 .gitignore 保持一致）

參考以下：

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
build
.lh
yarn.lock

/cypress/videos/
/cypress/screenshots/

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.zip

 

 5. .eslintrc.js 配置

/** .eslintrc.js
 * 在VSCode中安裝ESLint插件，編寫過程中檢測代碼質量
 * ESLint 代碼質量校驗相關配置
 * 這裏使用prettier作爲代碼格式化工具，用ESLint做代碼質檢
 * 相關配置使用下面extends擴展先做默認設置
 * 在.prettierrc.js文件中配置好後，格式化規則會以.prettierrc.js作爲最終格式，所以不建議在本文件中做代碼格式化相關配置
 * 相關prettier配置ESLint會默認加載爲代碼質檢 格式化以prettier爲主
 * 在本配置文件中只做代碼質量約束規範配置
 */
module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
        es2021: true
    },
    extends: [
        'eslint:recommended', // 使用推薦的eslint
        'plugin:vue/vue3-recommended', // 使用插件支持vue3
        //1.繼承.prettierrc.js文件規則  2.開啓rules的 "prettier/prettier": "error"  3.eslint fix的同時執行prettier格式化
        'plugin:prettier/recommended',
        'eslint-config-prettier'
    ],
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        ecmaFeatures: {
            modules: true,
            jsx: true
        },
        requireConfigFile: false,
        parser: '@babel/eslint-parser'
    },
    plugins: ['vue', 'prettier'],
    globals: {
        defineProps: 'readonly',
        defineEmits: 'readonly',
        defineExpose: 'readonly',
        withDefaults: 'readonly'
    },
    rules: {
        semi: ['warn', 'never'], // 禁止尾部使用分號
        'no-duplicate-case': 'warn', // 禁止出現重複case
        'no-empty': 'warn', // 禁止出現空語句塊
        'no-func-assign': 'warn', // 禁止對Function聲明重新賦值
        'no-unreachable': 'warn', // 禁止出現[return|throw]之後的代碼塊
        'no-else-return': 'warn', // 禁止if語句中return語句之後有else塊
        'no-empty-function': 'warn', // 禁止出現空的函數塊
        '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-multiple-empty-lines': 'warn', // 禁止出現多行空行
        'no-trailing-spaces': 'warn', // 禁止一行結束後面不要有空格
        'no-var': 'warn', // 禁止出現var用let和const代替
        'default-case': 'warn', // 要求switch語句中有default分支
        'no-extra-parens': ['error', 'functions'],
        curly: 0, // 要求所有控制語句使用一致的括號風格
        // '@typescript-eslint/no-var-requires': 'off', // 強制使用 import 且不允許使用 require 設置off關閉檢查
        'vue/require-v-for-key': 'off', // 對保留元素檢查 vue3中v-for會自動追加key值，所以不用再強制添加key屬性，所以不檢查key的填寫
        'vue/valid-v-for': 'error', // 對於非保留(自定義)元素檢查  vue3中v-for會自動追加key值，所以不用再強制添加key屬性，所以不檢查key的填寫
        'no-debugger': 'warn', // 禁止出現debugger
        // 添加組件命名忽略規則 vue官方默認規則是多單詞駝峯來進行組件命名
        'vue/multi-word-component-names': 'off',
        'vue/no-v-html': 'off', //去忽略v-html警告。
        'vue/no-unused-components': [2], // 禁止組件已註冊但未使用的情況
        'vue/html-end-tags': 2, // html 需要有結束標籤，除了自閉合標籤
        'vue/html-closing-bracket-spacing': 2, // html 需要有結束標籤，除了自閉合標籤
        'vue/component-definition-name-casing': 0, // 自定義組件名稱 - 駝峯和連字符
        'vue/attribute-hyphenation': 0 // 自定義屬性名稱 - 駝峯和連字符
    }
}

6.  .prettierrc.json 配置

{
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true,
    "bracketSameLine": true,
    "printWidth": 200,
    "trailingComma": "none",
    "endOfLine": "auto"
}

7. 運行項目測試

npm run dev

 8. 代碼中寫錯誤案例

// views/name.vue
var name = null

9. 瀏覽器預覽name.vue頁面

10. 錯誤提示