一、前言

在團(tuán)隊(duì)開發(fā)中，保持代碼風(fēng)格的一致性和代碼質(zhì)量的高度，對于項(xiàng)目的可維護(hù)性和可讀性非常重要。為了實(shí)現(xiàn)這一目標(biāo)，我們可以使用工具來自動格式化代碼并進(jìn)行代碼校驗(yàn)，在開發(fā)過程中捕獲潛在的問題，并提供修復(fù)建議。

本示例中，我們將使用 Vite 來創(chuàng)建一個新的 Vue 3 項(xiàng)目。我們將使用 Prettier 來統(tǒng)一格式化代碼，并集成 ESLint 和 Stylelint 進(jìn)行代碼校驗(yàn)規(guī)范。ESLint 用于檢測 JavaScript 代碼中的潛在問題和錯誤，而 Stylelint 則用于檢測 CSS/SCSS 代碼中的潛在問題和錯誤。

這樣的配置能夠幫助我們在開發(fā)過程中更早地捕獲問題，并提供規(guī)范的修復(fù)建議，從而提高代碼質(zhì)量和團(tuán)隊(duì)合作效率。

二、創(chuàng)建項(xiàng)目

1、環(huán)境準(zhǔn)備

• node v18.17.1
• pnpm 8.15.5

2、初始化項(xiàng)目

本項(xiàng)目使用vite進(jìn)行構(gòu)建，vite官方中文文檔參考：cn.vitejs.dev/guide/

使用pnpm進(jìn)行項(xiàng)目創(chuàng)建以及依賴下載等。（當(dāng)然npm、yarn也行）

pnpm:performant npm ，意味“高性能的 npm”。pnpm由npm/yarn衍生而來，解決了npm/yarn內(nèi)部潛在的bug，極大的優(yōu)化了性能，擴(kuò)展了使用場景。被譽(yù)為“最先進(jìn)的包管理工具”

pnpm安裝指令

npm i -g pnpm

項(xiàng)目初始化命令:

cmd里執(zhí)行或者在VSCode終端執(zhí)行即可

pnpm create vite

項(xiàng)目目錄結(jié)構(gòu)如下：

進(jìn)入到項(xiàng)目根目錄pnpm install安裝全部依賴.安裝完依賴運(yùn)行程序:pnpm run dev

運(yùn)行完畢項(xiàng)目跑在http://127.0.0.1:5173/,可以訪問你得項(xiàng)目啦

三、項(xiàng)目配置

1、eslint配置

eslint中文官網(wǎng):http://eslint.cn/

ESLint最初是由Nicholas C. Zakas 于2013年6月創(chuàng)建的開源項(xiàng)目。它的目標(biāo)是提供一個插件化的javascript代碼檢測工具

首先安裝eslint

pnpm i eslint -D

1.1、 生成配置文件:.eslintrc.cjs

npx eslint --init

該命令會向我們提幾個問題，然后根據(jù)我們的回答生成配置文件

安裝配置完成之后，src文件夾下面會多一個.eslintrc.cjs配置文件

.eslintrc.cjs配置文件內(nèi)容

module.exports = {
  //運(yùn)行環(huán)境
  env: {
    browser: true, //瀏覽器端
    es2021: true, //es2021
  },
  //規(guī)則繼承
  extends: [
    //全部規(guī)則默認(rèn)是關(guān)閉的,這個配置項(xiàng)開啟推薦規(guī)則,推薦規(guī)則參照文檔
    //比如:函數(shù)不能重名、對象不能出現(xiàn)重復(fù)key
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended", //ts語法規(guī)則
    "plugin:vue/vue3-essential", //vue3語法規(guī)則
  ],
  //要為特定類型的文件指定處理器
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],

  /**
   * 指定解析器:解析器
   * Esprima 默認(rèn)解析器Babel-ESLint babel解析器
   * @typescript-eslint/parser ts解析器
   */
  parserOptions: {
    ecmaVersion: "latest", //校驗(yàn)ECMA最新版本
    parser: "@typescript-eslint/parser",
    sourceType: "module", //設(shè)置為"script"（默認(rèn)），或者"module"代碼在ECMAScript模塊中
  },
  /**
   * ESLint支持使用第三方插件。在使用插件之前，您必須使用npm安裝它
   * 該eslint-plugin-前綴可以從插件名稱被省略
   */
  plugins: ["@typescript-eslint", "vue"],
  //eslint規(guī)則
  rules: {},
};

1.2、vue3環(huán)境代碼校驗(yàn)插件

vue3環(huán)境代碼校驗(yàn)插件

# 讓所有與prettier規(guī)則存在沖突的Eslint rules失效，并使用prettier進(jìn)行代碼檢查
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-node": "^11.1.0",
# 運(yùn)行更漂亮的Eslint，使prettier規(guī)則優(yōu)先級更高，Eslint優(yōu)先級低
"eslint-plugin-prettier": "^5.1.3",
# vue.js的Eslint插件（查找vue語法錯誤，發(fā)現(xiàn)錯誤指令，查找違規(guī)風(fēng)格指南
"eslint-plugin-vue": "^9.24.0",
# 該解析器允許使用Eslint校驗(yàn)所有babel code
"@babel/eslint-parser": "^7.24.1",

安裝指令

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

1.3、修改.eslintrc.cjs配置文件

module.exports = {
  //運(yùn)行環(huán)境
  env: {
    browser: true, //瀏覽器端
    es2021: true, //es2021
    node: true,
    jest: true,
  },
  //規(guī)則繼承
  extends: [
    //全部規(guī)則默認(rèn)是關(guān)閉的,這個配置項(xiàng)開啟推薦規(guī)則,推薦規(guī)則參照文檔
    //比如:函數(shù)不能重名、對象不能出現(xiàn)重復(fù)key
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended', //ts語法規(guī)則
    'plugin:vue/vue3-essential', //vue3語法規(guī)則
    'plugin:prettier/recommended',
  ],
  //要為特定類型的文件指定處理器
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],

  /* 指定如何解析語法 */
  parser: 'vue-eslint-parser',
  /** 優(yōu)先級低于 parse 的語法解析配置 */
  /**
   * 指定解析器:解析器
   * Esprima 默認(rèn)解析器Babel-ESLint babel解析器
   * @typescript-eslint/parser ts解析器
   */
  parserOptions: {
    ecmaVersion: 'latest', //校驗(yàn)ECMA最新版本
    parser: '@typescript-eslint/parser',
    sourceType: 'module', //設(shè)置為"script"（默認(rèn)），或者"module"代碼在ECMAScript模塊中
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
    },
  },
  /**
   * ESLint支持使用第三方插件。在使用插件之前，您必須使用npm安裝它
   * 該eslint-plugin-前綴可以從插件名稱被省略
   */
  plugins: ['@typescript-eslint', 'vue'],

  /*
   * eslint規(guī)則
   * "off" 或 0    ==>  關(guān)閉規(guī)則
   * "warn" 或 1   ==>  打開的規(guī)則作為警告（不影響代碼執(zhí)行）
   * "error" 或 2  ==>  規(guī)則作為一個錯誤（代碼不能執(zhí)行，界面報錯）
   */
  rules: {
    // eslint（https://zh-hans.eslint.org/docs/latest/rules/）
    'no-var': 'error', // 要求使用 let 或 const 而不是 var
    'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允許多個空行
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unexpected-multiline': 'error', // 禁止空余的多行
    'space-before-function-paren': 'off', // 函數(shù)括號前面是否需要空格
    'no-use-before-define': 'off', // 禁止在變量定義前使用變量
    'no-unused-vars': 'off', // 禁止未使用過的變量
    'no-undef': 'off', // 禁止使用未定義的變量
    'no-useless-escape': 'off', // 禁止不必要的轉(zhuǎn)義字符
    'prettier/prettier': 'error', // 代碼格式化
    'comma-dangle': 'off', // 對象或數(shù)組最后一個元素后面是否需要加逗號
    // 結(jié)尾必須有分號;
    semi: [
      'error',
      'always',
      {
        omitLastInOneLineBlock: true,
      },
    ],

    // typeScript (https://typescript-eslint.io/rules)
    '@typescript-eslint/no-unused-vars': 'error', // 禁止定義未使用的變量
    '@typescript-eslint/prefer-ts-expect-error': 'off', // 禁止使用 @ts-ignore
    '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 類型
    '@typescript-eslint/no-var-requires': 'off', // 允許使用 require() 函數(shù)導(dǎo)入模塊
    '@typescript-eslint/no-empty-function': 'off', // 禁止空函數(shù)
    '@typescript-eslint/no-use-before-define': 'off', // 禁止在 函數(shù)/類/變量 定義之前使用它們
    '@typescript-eslint/ban-types': 'off', // 禁止使用特定類型
    '@typescript-eslint/no-non-null-assertion': 'off', // 不允許使用后綴運(yùn)算符的非空斷言(!)
    '@typescript-eslint/no-namespace': 'off', // 禁止使用自定義 TypeScript 模塊和命名空間。
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 要求函數(shù)和類方法的顯式返回類型
    '@typescript-eslint/ban-ts-comment': 'error', // 禁止在類型注釋或類型斷言中使用 // @ts-ignore
    '@typescript-eslint/semi': 'off',

    // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
    'vue/multi-word-component-names': 'off', // 要求組件名稱始終為 “-” 鏈接的單詞
    'vue/no-v-model-argument': 'off', // 禁止在 v-model 指令中使用 argument 選項(xiàng)
    'vue/no-reserved-component-names': 'off', // 禁止使用保留字命名組件
    'vue/attributes-order': 'off', // 禁止組件的屬性順序不一致
    'vue/one-component-per-file': 'off', // 要求每個文件只有一個組件
    'vue/no-multiple-template-root': 'off', // 禁止在單個文件中使用多個根元素
    'vue/max-attributes-per-line': 'off', // 限制每行屬性的最大數(shù)量
    'vue/multiline-html-element-content-newline': 'off', // 限制多行 HTML 元素內(nèi)容的縮進(jìn)
    'vue/singleline-html-element-content-newline': 'off', // 限制單行 HTML 元素內(nèi)容的縮進(jìn)
    'vue/require-default-prop': 'off', // 禁止在 props 定義中不指定默認(rèn)值
    'vue/require-explicit-emits': 'off', // 要求顯式聲明 emits 事件
    'vue/html-closing-bracket-newline': 'off', // 禁止在 HTML 結(jié)束標(biāo)簽的前后都有換行符
    'vue/attribute-hyphenation': 'off', // 強(qiáng)制屬性命名使用連字符線分隔
    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的變量<template>被標(biāo)記為未使用
    'vue/no-mutating-props': 'off', // 不允許組件 prop的改變
    'vue/no-v-html': 'off', // 禁止使用v-html指令
    'vue/custom-event-name-casing': 'error', // 自定義事件名稱必須使用駝峰式命名法
  },
};

1.4、創(chuàng)建 .eslintignore 忽略文件

編輯 .eslintignore,添加不需要校驗(yàn)的目錄、文件

/dist
dist
/node_modules
node_modules
tsconfig.json
*.svg
*.png
*.jpg
*.jpeg
*.scss
*.gif
*.webp
*.ttf
index.html
*.md

1.5、運(yùn)行腳本

package.json新增兩個運(yùn)行腳本

"scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix",
}

2、prettier配置

官網(wǎng)：https://prettier.io/docs/en/install

有了eslint，為什么還要有prettier？eslint針對的是javascript，他是一個檢測工具，包含js語法以及少部分格式問題，在eslint看來，語法對了就能保證代碼正常運(yùn)行，格式問題屬于其次；

而prettier屬于格式化工具，它看不慣格式不統(tǒng)一，所以它就把eslint沒干好的事接著干，另外，prettier支持

包含js在內(nèi)的多種語言。

總結(jié)起來，eslint和prettier這倆兄弟一個保證js代碼質(zhì)量，一個保證代碼美觀。

2.1、安裝依賴包

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

2.2、創(chuàng)建 .prettierrc

項(xiàng)目根目錄下創(chuàng)建 .prettierrc文件，并添加對應(yīng)的規(guī)則

//命令創(chuàng)建
node --eval "fs.writeFileSync('.prettierrc','{}\n')"

添加對應(yīng)規(guī)則：參考官網(wǎng)：https://prettier.io/docs/en/options

{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "all",
  "tabWidth": 2
}

2.3、創(chuàng)建.prettierignore忽略文件

在項(xiàng)目根目錄下創(chuàng)建 .prettierignore 文件
以下文件夾下內(nèi)容不需要被格式化

# 忽略格式化文件 (根據(jù)項(xiàng)目需要自行添加)
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
.idea
.vscode
.hbuilderx
src/manifest.json
src/pages.json
*.md
*.woff
*.ttf
*.yaml
/docs
.husky
/bin

*通過pnpm run lint去檢測語法，如果出現(xiàn)不規(guī)范格式,通過pnpm run fix 修改

3、stylelint配置

stylelint為css的lint工具?？筛袷交痗ss代碼，檢查css語法錯誤與不合理的寫法，指定css書寫順序等。

3.1、安裝依賴

pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

3.2、創(chuàng)建.stylelintrc.cjs配置文件

參考：https://stylelint.io/user-guide/configure

// @see https://stylelint.bootcss.com/

module.exports = {
  extends: [
    'stylelint-config-standard', // 配置stylelint拓展插件
    'stylelint-config-html/vue', // 配置 vue 中 template 樣式格式化
    'stylelint-config-standard-scss', // 配置stylelint scss插件
    'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 樣式格式化
    'stylelint-config-recess-order', // 配置stylelint css屬性書寫順序插件,
    'stylelint-config-prettier', // 配置stylelint和prettier兼容
  ],
  overrides: [
    {
      files: ['**/*.(scss|css|vue|html)'],
      customSyntax: 'postcss-scss',
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html',
    },
  ],
  ignoreFiles: [
    '**/*.js',
    '**/*.jsx',
    '**/*.tsx',
    '**/*.ts',
    '**/*.json',
    '**/*.md',
    '**/*.yaml',
  ],
  /**
   * null  => 關(guān)閉該規(guī)則
   * always => 必須
   */
  rules: {
    'value-keyword-case': null, // 在 css 中使用 v-bind，不報錯
    'no-descending-specificity': null, // 禁止在具有較高優(yōu)先級的選擇器后出現(xiàn)被其覆蓋的較低優(yōu)先級的選擇器
    'function-url-quotes': 'always', // 要求或禁止 URL 的引號 "always(必須加上引號)"|"never(沒有引號)"
    'no-empty-source': null, // 關(guān)閉禁止空源碼
    'selector-class-pattern': null, // 關(guān)閉強(qiáng)制選擇器類名的格式
    'property-no-unknown': null, // 禁止未知的屬性(true 為不允許)
    'block-opening-brace-space-before': 'always', //大括號之前必須有一個空格或不能有空白符
    'value-no-vendor-prefix': null, // 關(guān)閉 屬性值前綴 --webkit-box
    'property-no-vendor-prefix': null, // 關(guān)閉 屬性前綴 -webkit-mask
    'selector-pseudo-class-no-unknown': [
      // 不允許未知的選擇器
      true,
      {
        ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略屬性，修改element默認(rèn)樣式的時候能使用到
      },
    ],
  },
}

3.3、創(chuàng)建.stylelintignore忽略文件

/node_modules/*
/html/*
/dist/*
/public/*
public/*
/dist*
/docs/**/*

3.4、運(yùn)行腳本

"scripts": {
	"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
}

"scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src",
    "fix": "eslint src --fix",
    "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
    "lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
    "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
  },

當(dāng)我們運(yùn)行pnpm run format的時候，會把代碼直接格式化文章來源地址http://www.zghlxwxcb.cn/news/detail-861168.html

到了這里，關(guān)于vite 創(chuàng)建vue3項(xiàng)目，使用 Prettier 統(tǒng)一格式化代碼，集成 ESLint、Stylelint 代碼校驗(yàn)規(guī)范的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！