Eslint prettier airbnb规范 配置

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"}
}