項目代碼同步至碼雲 weiz-vue3-template 要求代碼規範，主要是為了提高多人協同和代碼維護效率，結合到此項目，具體工作就是為項目配置 eslint 和 prettier。 editorconfig 安裝 EditorConfig for VS Code 插件，根目錄下新建 .edito ...
項目代碼同步至碼雲 weiz-vue3-template
要求代碼規範，主要是為了提高多人協同和代碼維護效率，結合到此項目，具體工作就是為項目配置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系統，end_of_line 設置為 cr
eslint
安裝可以參考官方教程 vue.js代碼規範。
在這裡，我們建議使用另一種方式，安裝後，通過命令初始化。
1. 安裝
npm i eslint -D
2. 初始化
npm init @eslint/config
以下是操作實例：
PS D:\workspace\vue3\weiz-vue3-template> npm init @eslint/config
Need to install the following packages:
@eslint/[email protected]
Ok to proceed? (y)
# 輸入y開始安裝
? 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 # 檢查語法、發現問題並強制執行代碼風格
# 選擇第三項
? 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
# 選擇 vue
? Does your project use TypeScript? » No / Yes # 項目里是否使用了ts
# 選擇yes
? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection)
# 代碼運行環境，輸入空格選擇，可以多選
√ Browser
√ Node
# 都選中後回車
Use a popular style guide # 使用一種流行的風格指南
> Answer questions about your style # 自定義你的style
# 選擇第二項
? What format do you want your config file to be in? ... # 你的config配置文件類型
> JavaScript
YAML
JSON
# 建議選擇js
? What style of indentation do you use? ... # 使用什麼樣的縮進風格
Tabs
> Spaces
# 建議空格
? What quotes do you use for strings? ... # 字元串使用單引號還是雙引號
Double
> Single
# 單引號
? What line endings do you use? ... # 行尾格式
Unix
> Windows
# Windows，如果是非windows系統，選擇 unix
? Do you require semicolons? » No / Yes # 是否需要分號
# 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
# 檢查後列出以上項目，選擇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. 簡易安裝
通過以上安裝我們發現，最終還是安裝了4個依賴，@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest eslint@latest，如果我們熟悉的話，後續就可以直接安裝
npm i @typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest eslint@latest -D
然後在根目錄下新建 .eslintrc.cjs，然後把我們常用的配置複製進去即可。
4. .eslintrc.cjs 配置
以下附帶基礎配置：
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:vue/vue3-essential',
'plugin:prettier/recommended' // 後續相容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 文件，增加需要忽略類型檢查的文件和目錄
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"
}
運行 `npm run lint`，即可修複相關代碼問題
prettier
prettier 是為了方便格式化代碼，它的安裝比較簡單，後兩個依賴是為瞭解決和 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 設置為 cr
3. .prettierignore
根目錄下新建 .prettierignore 文件，增加需要忽略格式化的文件和目錄
node_modules
dist
public
*.md
*.txt
.vscode
index.html
總結
做好以上配置後，可以運行 npm run lint 修複大部分代碼格式問題，或者右鍵使用 prettier 格式化代碼，將大大提高你的編碼效率。
https://www.cnblogs.com/weizwz/p/17862355.html
本博客所有文章除特別聲明外，均採用 「署名-非商業性使用-相同方式共用 4.0 國際」 許可協議，轉載請註明出處！
內容粗淺，如有錯誤，歡迎大佬批評指正
