# 腾讯团队的Eslint配置限制 注意区分vue版本 ## eslint-config-alloy 安装最新新版 * vue3 - `npm install --save-dev eslint babel-eslint vue-eslint-parser eslint-plugin-vue eslint-config-alloy` * vue2 - `npm install --save-dev eslint-config-alloy@3` * 版本 ``` "babel-eslint": "^10.1.0", "eslint": "^7.28.0", "eslint-config-alloy": "^4.1.0", "eslint-plugin-vue": "^7.10.0", "vue-eslint-parser": "^7.6.0" ``` * **vue2**创建.eslintrc.js配置文件 > ![](https://img.kancloud.cn/92/40/9240a5d0fefaa3735228c9d4a9319c03_750x378.png) * **vue3**创建.eslintrc.js配置文件 > ![](https://img.kancloud.cn/69/ce/69ceca98a9dc7ba08c6465c9f3d04d1b_988x974.png) *** * vue2/vue3 配置文件命名为 **.prettierrc.js** * vue+type 配置文件命名为 **prettier.config.js** ``` module.exports = { // 一行最多 120 字符 printWidth: 120, // 使用 2 个空格缩进 tabWidth: 2, // 不使用缩进符,而使用空格 useTabs: false, // 行尾需要有分号 semi: true, // 使用单引号 singleQuote: false, // 对象的 key 仅在必要时用引号 quoteProps: "as-needed", // jsx 不使用单引号,而使用双引号 jsxSingleQuote: false, // 末尾需要有逗号 trailingComma: "all", // 大括号内的首尾需要空格 bracketSpacing: true, // jsx 标签的反尖括号需要换行 jsxBracketSameLine: false, // 箭头函数,只有一个参数的时候,也需要括号 arrowParens: "always", // 每个文件格式化的范围是文件的全部内容 rangeStart: 0, rangeEnd: Infinity, // 不需要写文件开头的 @prettier requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 使用默认的折行标准 proseWrap: "preserve", // 根据显示样式决定 html 要不要折行 htmlWhitespaceSensitivity: "css", // vue 文件中的 script 和 style 内不用缩进 vueIndentScriptAndStyle: false, // 换行符使用 lf endOfLine: "lf", // 格式化嵌入的内容 embeddedLanguageFormatting: "auto", }; ``` * AlloyTeam ESLint 规则不仅是一套先进的适用于 React/Vue/Typescript 项目的 ESLint 配置规范,而且也是你配置个性化 ESLint 规则的最佳参考 * 配置rules文档参考:[https://alloyteam.github.io/eslint-config-alloy/?language=zh-CN&rule=base]() * git参考地址:[https://github.com/AlloyTeam/eslint-config-alloy/blob/master/README.zh-CN.md#vue]()