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"