1. prettier
   1）vscode中使用
   a. 安裝插件(Prettier)

安裝成功后，在你打開支持的文件時，下方文件信息狀態欄會有prettier標致：

雙擊它或者直接在輸出命令窗口那里查看prettier的日志信息：

從日志這里可以看出，它是優先使用項目中的prettier配置的。
另外，一般你下載代碼格式化插件，都是搭配vscode的文件自動保存格式的（這樣方便），但是注意，這個自動保存格式化使用的是文件的默認格式化配置。

b. vscode配置
格式化的默認配置修改為prettier。

開啟格式化自動保存。

最后記得要重啟vscode

注意：當配置發生變化的時候也要重啟vscode

2）項目中使用
a. 新建配置（.prettierrc.cjs 或者.prettier.json）,下面以.prettierrc.cjs為例

module.exports = {printWidth: 150, // 每行代碼長度（默認80）tabWidth: 2, // 縮進空格數useTabs: false, //不用tab縮進semi: true, //// 在語句末尾打印分號singleQuote: true, // 使用單引號而不是雙引號vueIndentScriptAndStyle: true, //Vue文件腳本和樣式標簽縮進quoteProps: 'as-needed', // 更改引用對象屬性的時間 可選值"<as-needed|consistent|preserve>"jsxSingleQuote: true, // 在JSX中使用單引號而不是雙引號trailingComma: 'es5', //多行時盡可能打印尾隨逗號。（例如，單行數組永遠不會出現逗號結尾。） 可選值"<none|es5|all>"，默認nonebracketSpacing: true, // 在對象文字中的括號之間打印空格jsxBracketSameLine: false, //jsx 標簽的反尖括號需要換行arrowParens: 'always', // 在單獨的箭頭函數參數周圍包括括號 always：(x) => x \ avoid：x => xrangeStart: 0, // 這兩個選項可用于格式化以給定字符偏移量（分別包括和不包括）開始和結束的代碼rangeEnd: Infinity,requirePragma: false, // 指定要使用的解析器，不需要寫文件開頭的 @prettierinsertPragma: false, // 不需要自動在文件開頭插入 @prettierproseWrap: 'preserve', // 使用默認的折行標準 always\never\preservehtmlWhitespaceSensitivity: 'css', // 指定HTML文件的全局空格敏感度 css\strict\ignoreendOfLine: 'auto', // 因為prettier的規范和eslint的換行規則不同，所以這個必須配置。要不然每次打開文件都會有一堆的警告;換行符使用 lf 結尾是 可選值"<auto|lf|crlf|cr
};

b. package.json增加配置

"lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,scss,vue,html,md}\""

c. 執行 npm run lint:prettier

2. eslint 采用antfu-config
   1）安裝eslint插件
   

2）通過生成配置文件

npx @antfu/eslint-config@latest

3）安裝

npm install @antfu/eslint-config@latest

4）更改eslint.config.js

import antfu from '@antfu/eslint-config'export default antfu({// @stylistic/eslint-plugin-plus// stylistic: true,stylistic: {indent: 2, // 4, or 'tab'quotes: "single", // or 'double/single'semi: true,},// eslint-plugin-formatformatters: true,// unocss 檢測&格式化 暫時注釋 等配置了unocss再開放為true// unocss: true,// vue的eslint配置vue: true,// 保存刪除未引入的代碼// isInEditor: false,// 9x版本 忽略文件這種配置方式 廢棄掉eslintignoreignores: ['*.sh','node_modules','*.md','*.woff','*.ttf','.idea','/public','/docs','.husky','.local','/bin','Dockerfile',],lessOpinionated: true,rules: {'eslint-comments/no-unlimited-disable': 'off','ts/no-use-before-define': 'off','style/no-mixed-operators': 'off','no-console': 'warn','ts/no-unused-expressions': 'off','style/max-statements-per-line': 'off','ts/prefer-namespace-keyword': 'off','antfu/top-level-function': 'off','node/prefer-global/process': 'off','ts/consistent-type-definitions': 'off','ts/ban-ts-comment': 'off','vue/singleline-html-element-content-newline': 'off', // vue 標簽強制換行// 關閉一些耗時的規則'import/no-cycle': 'off','import/no-deprecated': 'off','import/no-named-as-default': 'off','prefer-promise-reject-errors': 'off',// 'ts/no-unused-vars': ['error', {//   argsIgnorePattern: '^_',//   varsIgnorePattern: '^_',// }],// '@typescript-eslint/no-unused-vars': ['error', {//   argsIgnorePattern: '^_',//   varsIgnorePattern: '^_',// }],},
})

5）重啟vscode
6）效果展示

3. stylelint
1）安裝插件

2）安裝依賴包

npm install -D stylelint stylelint-config-standard stylelint-order stylelint-config-prettier

3）增加以下配置
.stylelintignore

/dist/*
/public/*
public/*

.stylelintrc.cjs

module.exports = {root: true,plugins: ['stylelint-order'],extends: ['stylelint-config-standard', 'stylelint-config-prettier'],rules: {'selector-pseudo-class-no-unknown': [true,{ignorePseudoClasses: ['global'],},],'selector-pseudo-element-no-unknown': [true,{ignorePseudoElements: ['v-deep'],},],'at-rule-no-unknown': [true,{ignoreAtRules: ['tailwind','apply','variants','responsive','screen','function','if','each','include','mixin',],},],'no-empty-source': null,'named-grid-areas-no-invalid': null,'unicode-bom': 'never','no-descending-specificity': null,'font-family-no-missing-generic-family-keyword': null,'declaration-colon-space-after': 'always-single-line','declaration-colon-space-before': 'never',// 'declaration-block-trailing-semicolon': 'always','rule-empty-line-before': ['always',{ignore: ['after-comment', 'first-nested'],},],'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],'order/order': [['dollar-variables','custom-properties','at-rules','declarations',{type: 'at-rule',name: 'supports',},{type: 'at-rule',name: 'media',},'rules',],{ severity: 'warning' },],},ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
};

stylelint.config.js（16.x.x.x以上）

export default {plugins: ['stylelint-order'],extends: ['stylelint-config-standard', 'stylelint-config-prettier'],rules: {'selector-pseudo-class-no-unknown': [true,{ignorePseudoClasses: ['global'],},],'selector-pseudo-element-no-unknown': [true,{ignorePseudoElements: ['v-deep'],},],'at-rule-no-unknown': [true,{ignoreAtRules: ['tailwind','apply','variants','responsive','screen','function','if','each','include','mixin',],},],'no-empty-source': null,'named-grid-areas-no-invalid': null,'unicode-bom': 'never','no-descending-specificity': null,'font-family-no-missing-generic-family-keyword': null,'declaration-colon-space-after': 'always-single-line','declaration-colon-space-before': 'never',// 'declaration-block-trailing-semicolon': 'always','rule-empty-line-before': ['always',{ignore: ['after-comment', 'first-nested'],},],'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],'order/order': [['dollar-variables','custom-properties','at-rules','declarations',{type: 'at-rule',name: 'supports',},{type: 'at-rule',name: 'media',},'rules',],{ severity: 'warning' },],},ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts', '/dist/*', '/public/*', 'public/*'],
}

4）.settings.json增加

"source.fixAll.stylelint": "explicit"