項(xiàng)目代碼同步至碼云 weiz-vue3-template
要求代碼規(guī)范，主要是為了提高多人協(xié)同和代碼維護(hù)效率，結(jié)合到此項(xiàng)目，具體工作就是為項(xiàng)目配置 eslint 和 prettier。

editorconfig

安裝 EditorConfig for VS Code 插件，根目錄下新建 .editorconfig 文件，增加以下配置

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = crlf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120

如果是非windows系統(tǒng)，end_of_line 設(shè)置為 cr

eslint

安裝可以參考官方教程 vue.js代碼規(guī)范。
在這里，我們建議使用另一種方式，安裝后，通過(guò)命令初始化。

1. 安裝

npm i eslint -D

2. 初始化

npm init @eslint/config

以下是操作實(shí)例：

PS D:\workspace\vue3\weiz-vue3-template> npm init @eslint/config
Need to install the following packages:
@eslint/create-config@0.4.6
Ok to proceed? (y)
# 輸入y開(kāi)始安裝
? How would you like to use ESLint? ... # 如何使用eslint
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style # 檢查語(yǔ)法、發(fā)現(xiàn)問(wèn)題并強(qiáng)制執(zhí)行代碼風(fēng)格
# 選擇第三項(xiàng)
? What type of modules does your project use? ... # 項(xiàng)目使用哪種類(lèi)型的模塊
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
# 選擇第一項(xiàng)
? Which framework does your project use? ... # 使用哪種框架
  React
> Vue.js
  None of these
# 選擇 vue
? Does your project use TypeScript? ? No / Yes # 項(xiàng)目里是否使用了ts
# 選擇yes
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
# 代碼運(yùn)行環(huán)境，輸入空格選擇，可以多選
√ Browser
√ Node
# 都選中后回車(chē)
  Use a popular style guide # 使用一種流行的風(fēng)格指南
> Answer questions about your style # 自定義你的style
# 選擇第二項(xiàng)
? What format do you want your config file to be in? ... # 你的config配置文件類(lèi)型
> JavaScript
  YAML
  JSON
# 建議選擇js
? What style of indentation do you use? ... # 使用什么樣的縮進(jìn)風(fēng)格
  Tabs
> Spaces
# 建議空格
? What quotes do you use for strings? ... # 字符串使用單引號(hào)還是雙引號(hào)
  Double
> Single
# 單引號(hào)
? What line endings do you use? ... # 行尾格式
  Unix
> Windows
# Windows，如果是非windows系統(tǒng)，選擇 unix
? Do you require semicolons? ? No / Yes # 是否需要分號(hào)
# No
@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest eslint@latest
? Would you like to install them now? ? No / Yes
# 檢查后列出以上項(xiàng)目，選擇yes安裝
? Which package manager do you want to use? ... # 使用哪種安裝方式
> npm
  yarn
  pnpm
# 選擇npm，然后等待安裝完成
...
added 138 packages, changed 1 package, and audited 184 packages in 50s

39 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.cjs file in D:\workspace\vue3\weiz-vue3-template

安裝完成，在根目錄下生成了 .eslintrc.cjs 文件，并自帶一些我們選擇的配置。

3. 簡(jiǎn)易安裝

通過(guò)以上安裝我們發(fā)現(xiàn)，最終還是安裝了4個(gè)依賴，@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest eslint@latest，如果我們熟悉的話，后續(xù)就可以直接安裝

npm i @typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest eslint@latest -D

然后在根目錄下新建 .eslintrc.cjs，然后把我們常用的配置復(fù)制進(jìn)去即可。

4. .eslintrc.cjs 配置

以下附帶基礎(chǔ)配置：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-essential',
    'plugin:prettier/recommended' // 后續(xù)兼容prettier
  ],
  overrides: [
    {
      env: {
        node: true
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script'
      }
    }
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['@typescript-eslint', 'vue'],
  rules: {
    indent: ['error', 2],
    'linebreak-style': ['error', 'windows'],
    quotes: ['error', 'single'],
    semi: ['error', 'never']
  }
}

5. .eslintignore

根目錄下新建 .eslintignore 文件，增加需要忽略類(lèi)型檢查的文件和目錄

node_modules
dist
public
*.md
*.txt
.vscode
index.html

6. 增加命令

修改 package.json

"scripts": {
  "lint": "eslint --fix --ext .ts,.tsx,.vue,.js,.jsx --max-warnings 0"
}
運(yùn)行 `npm run lint`，即可修復(fù)相關(guān)代碼問(wèn)題

prettier

prettier 是為了方便格式化代碼，它的安裝比較簡(jiǎn)單，后兩個(gè)依賴是為了解決和 eslint 的沖突

1. 安裝

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

2. .prettierrc

根目錄下新建 .prettierrc 文件，并增加以下配置

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": false,
  "endOfLine": "crlf"
}

如果是非windows，endOfLine 設(shè)置為 cr

3. .prettierignore

根目錄下新建 .prettierignore 文件，增加需要忽略格式化的文件和目錄

node_modules
dist
public
*.md
*.txt
.vscode
index.html

總結(jié)

做好以上配置后，可以運(yùn)行 npm run lint 修復(fù)大部分代碼格式問(wèn)題，或者右鍵使用 prettier 格式化代碼，將大大提高你的編碼效率。

總結(jié)

以上是生活随笔為你收集整理的Vite4+Typescript+Vue3+Pinia 从零搭建(4) - 代码规范的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。