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 -Deslint-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.cjs3.根目录下新建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) => x
requirePragma: 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', //格式化的解析器，默认是babylon
endOfLine: 'auto', // 结尾是 \n \r \n\r auto
jsxSingleQuote: 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"
}
}
