1.安裝vscode的Eslint和prettier 插件

eslint：代碼質量檢查工具

https://eslint.nodejs.cn/docs/latest/use/getting-started

prettier：代碼風格格式化工具

https://www.prettier.cn/docs/index.html

/*
eslint-config-airbnb-base airbnb 規范
eslint-import-resolver-typescript 解決@別名識別問題 
eslint-plugin-import 如果是npm yarn需要安裝
*/
pnpm i eslint-config-airbnb-base eslint-plugin-import eslint-import-resolver-typescript  -D

eslint-config-airbnb-base airbnb ：airbnb代碼質量規范

https://github.com/airbnb/javascript#events

eslint-import-resolver-typescript ： 解決@別名識別問題

https://www.npmjs.com/package/eslint-import-resolver-typescript

2.根目錄下新建eslint規則配置文件

.eslintrc.js 修改規則

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')module.exports = {root: true,extends: ['plugin:vue/vue3-essential','eslint:recommended','airbnb-base','@vue/eslint-config-typescript','@vue/eslint-config-prettier/skip-formatting'//  './.eslintrc-auto-import.json' 后面自動導入會用到],parserOptions: {ecmaVersion: 'latest'},overrides: [{files: ['*.ts', '*.tsx', '*.vue'],rules: {// 解決 ts 全局類型定義后，eslint報錯的問題'no-undef': 'off'}}],settings: {'import/resolver': {typescript: {project: './tsconfig.*.json'}}},rules: {'import/no-extraneous-dependencies': 'off',// 對后綴的檢測'import/extensions': ['error','ignorePackages',{ js: 'never', jsx: 'never', ts: 'never', tsx: 'never' }],'import/order': ['error',{groups: [/* builtin ：內置模塊，如 path，fs等 Node.js內置模塊。external ：外部模塊，如 lodash ，react 等第三方庫。internal ：內部模塊，如相對路徑的模塊、包名前綴為 @ 的模塊。unknown ：未知模塊，如模塊名沒有指定擴展名或模塊路徑缺失擴展名。parent ：父級目錄的模塊。sibling ：同級目錄的模塊。index ：當前目錄的 index 文件。object ：使用ES6 導入的模塊。type ：使用 import type 導入的模塊。*/['builtin', 'external'],'internal',['parent', 'sibling'],'index','type','object','unknown'],pathGroups: [{pattern: '../**',group: 'parent',position: 'after'},{pattern: './*.scss',group: 'sibling',position: 'after'}],// 不同組之間是否換行。'newlines-between': 'always',// 根據字母順序對每組內的引用進行排序。alphabetize: {order: 'asc',caseInsensitive: true}}],}
}

• 根目錄新建忽略文件 .eslintignore

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md.eslintrc.cjs
.prettierrc.json
.stylelintrc.cjs

3.根目錄下新建prettier配置文件

{"$schema": "https://json.schemastore.org/prettierrc","semi": false,"tabWidth": 2,"singleQuote": true,"printWidth": 100,"trailingComma": "none"
}

段代碼是Prettier代碼格式化工具的配置文件的內容，通常存儲為.prettierrc或prettier.config.js。Prettier是一個流行的代碼格式化工具，用于確保代碼的一致性和風格。下面是各個配置項的解釋：

"$schema": 指向Prettier配置文件的JSON Schema定義。這個URL是Schema存儲位置，它定義了哪些屬性是有效的，以及各屬性的數據類型等。這有助于支持JSON Schema的編輯器提供自動完成、類型校驗等功能。

"semi": 設置為false表示在每條語句的末尾不自動添加分號。Prettier會根據這個配置來格式化代碼，如果你更傾向于省略分號，這會是一個有用的配置。

"tabWidth": 設置代碼的縮進寬度為2個空格。這個配置影響代碼的可讀性和布局，2是一個比較常見的選擇，因為它既保持了代碼的緊湊，也足夠清晰。

"singleQuote": 設置為true表示使用單引號(')而不是雙引號(")來包圍字符串。這是代碼風格的一個選擇，不同的團隊或項目可能有不同的偏好。

"printWidth": 設置一行代碼的最大長度為100個字符。當代碼長度超過這個閾值時，Prettier會嘗試換行。這個配置有助于保持代碼的可讀性，尤其是在小屏幕或分屏編輯時。

"trailingComma": 設置為"none"表示在對象或數組最后一個元素后面不加逗號。這個配置項也是基于風格偏好的，一些人喜歡在最后一個元素后加上逗號（稱為尾后逗號），因為這樣在添加新元素時可以減少版本控制中的差異（只增加一行，而不是修改一行加一行）。

3.1兩個prettier的配置例子，可根據個人需求更改

module.exports = {printWidth: 100, //單行長度tabWidth: 2, //縮進長度useTabs: false, //使用空格代替tab縮進semi: true, //句末使用分號singleQuote: true, //使用單引號quoteProps: 'as-needed', //僅在必需時為對象的key添加引號jsxSingleQuote: true, // jsx中使用單引號trailingComma: 'all', //多行時盡可能打印尾隨逗號bracketSpacing: true, //在對象前后添加空格-eg: { foo: bar }jsxBracketSameLine: true, //多屬性html標簽的‘>’折行放置arrowParens: 'always', //單參數箭頭函數參數周圍使用圓括號-eg: (x) => xrequirePragma: false, //無需頂部注釋即可格式化insertPragma: false, //在已被preitter格式化的文件頂部加上標注proseWrap: 'preserve', //不知道怎么翻譯htmlWhitespaceSensitivity: 'ignore', //對HTML全局空白不敏感vueIndentScriptAndStyle: false, //不對vue中的script及style標簽縮進endOfLine: 'lf', //結束行形式embeddedLanguageFormatting: 'auto', //對引用代碼進行格式化
};

module.exports = {printWidth: 200, //行寬semi: true, //分號singleQuote: true, // 使用單引號useTabs: false, //使用 tab 縮進tabWidth: 2, //縮進trailingComma: 'es5', //后置逗號，多行對象、數組在最后一行增加逗號arrowParens: 'avoid', //箭頭函數只有一個參數的時候可以忽略括號bracketSpacing: true, //括號內部不要出現空格proseWrap: 'preserve', //換行方式 默認值。因為使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本樣式進行折行parser: 'babylon', //格式化的解析器，默認是babylonendOfLine: 'auto', // 結尾是 \n \r \n\r autojsxSingleQuote: false, // 在jsx中使用單引號代替雙引號jsxBracketSameLine: false, //在jsx中把'>' 是否單獨放一行stylelintIntegration: false, //不讓prettier使用stylelint的代碼格式進行校驗eslintIntegration: false, //不讓prettier使用eslint的代碼格式進行校驗tslintIntegration: false, // 不讓prettier使用tslint的代碼格式進行校驗disableLanguages: ['vue'], // 不格式化vue文件，vue文件的格式化單獨設置htmlWhitespaceSensitivity: 'ignore',ignorePath: '.prettierignore', // 不使用prettier格式化的文件填寫在項目的.prettierignore文件中requireConfig: false, // Require a 'prettierconfig' to format prettier
}

4.保存自動格式化當前文件

• 根目錄下新建 .vscode/settings.json

// settings.json{"typescript.tsdk": "node_modules/typescript/lib","editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true,"editor.codeActionsOnSave": {"source.fixAll.eslint": "explicit","source.fixAll.stylelint": "explicit"},"stylelint.validate": ["css", "scss", "less", "vue"],"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[ts]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
}