ESLint+Prettier代码规范实践/解决二者冲突问题
eslint-plugin-prettier 和 eslint-config-prettier
prettierrc
.prettierrc.js
module.exports = { \"prettier.printWidth\": 100, // 超过最大值换行 \"prettier.tabWidth\": 4, // 缩进字节数 \"prettier.useTabs\": false, // 缩进不使用tab，使用空格 \"prettier.semi\": true, // 句尾添加分号 \"prettier.singleQuote\": true, // 使用单引号代替双引号 \"prettier.proseWrap\": \"preserve\", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行 \"prettier.arrowParens\": \"avoid\", // (x) = {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 \"prettier.bracketSpacing\": true, // 在对象，数组括号与文字之间加空格 \"{ foo: bar }\" \"prettier.disableLanguages\": [\"vue\"], // 不格式化vue文件，vue文件的格式化单独设置 \"prettier.endOfLine\": \"auto\", // 结尾是 \\n \\r \\n\\r auto \"prettier.eslintIntegration\": false, //不让prettier使用eslint的代码格式进行校验 \"prettier.htmlWhitespaceSensitivity\": \"ignore\", \"prettier.ignorePath\": \".prettierignore\", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中 \"prettier.jsxBracketSameLine\": false, // 在jsx中把\' \' 是否单独放一行 \"prettier.jsxSingleQuote\": false, // 在jsx中使用单引号代替双引号 \"prettier.parser\": \"babylon\", // 格式化的解析器，默认是babylon \"prettier.requireConfig\": false, // Require a \'prettierconfig\' to format prettier \"prettier.stylelintIntegration\": false, //不让prettier使用stylelint的代码格式进行校验 \"prettier.trailingComma\": \"es5\", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号） \"prettier.tslintIntegration\": false // 不让prettier使用tslint的代码格式进行校验
eslint
// https://cn.eslint.org/docs/rules/ * \"off\"或者0，不启用这个规则 * \"warn\"或者1，出现问题会有警告 * \"error\"或者2，出现问题会报错module.exports = { root: true, //此项是用来告诉eslint找当前配置文件不能往父级查找 env: { //环配置 如 \"browser\": true, node: true, node: true, extends: [ \'plugin:vue/essential\', \'@vue/airbnb\', rules: { \'array-callback-return\': 1, //return 后面是否允许省略 \"arrow-parens\": [\"error\", \"as-needed\"], // 箭头函数的参数可以不使用圆括号 \'consistent-return\': 0, //要求 return 语句要么总是指定返回的值，要么不指定 \'camelcase\': 0, //强制驼峰法命名 \'eqeqeq\': 0, //强制全等( === 和 !==) \'func-names\': 0, //函数表达式必须有名字 \"global-require\": 0, // 取消对require的验证，使得可以使用require来加载图片的相对路径 \"import/no-unresolved\": 0, // 取消自动解析路径，以此开启alias的别名路径设置 \'import/extensions\': 0, // 取消对文件扩展名的验证 \'indent\': \'off\', //缩进风格(强制使用一致的缩进) \"linebreak-style\": 0, // 取消换行符\\n或\\r\\n的验证() \'max-len\': 0, //字符串最大长度 \"no-unused-vars\": 1, //禁止出现未使用过的变量 \"no-redeclare\": 1, //禁止多次声明同一变量 \'no-use-before-define\': 1, //禁止在变量定义之前使用它们 \"no-unused-expressions\": 0, // 允许使用未使用过的表达式，以此来支持a a()的代码形式 \'no-restricted-syntax\': 1, //禁用特定的语法 \'no-plusplus\': 1, //禁止使用++，-- \'no-underscore-dangle\': 0, // 允许在标识符中使用下划线 \'no-param-reassign\': 0, // 禁止对 function 的参数进行重新赋值 \'no-nested-ternary\': 0, // 禁止嵌套三元表达式 \'no-else-return\': 0, //禁止 if 语句中 return 语句之后有 else 块 \'no-console\': process.env.NODE_ENV === \'production\' ? \'error\' : \'off\', \'no-debugger\': process.env.NODE_ENV === \'production\' ? \'error\' : \'off\', \'no-shadow\': [1, { //外部作用域中的变量不能与它所包含的作用域中的变量或参数同名 \"allow\": [\"resolve\", \"reject\", \"done\", \"cb\"] \'prefer-rest-params\': 1, //要求使用剩余参数而不是 arguments \'prefer-arrow-callback\': 0, //要求回调函数使用箭头函数 \'prefer-const\': 1, //首选const \"semi\": false, // 使用分号, 默认true \"singleQuote\": true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号) \"tabWidth\": 4, // tab缩进大小,默认为4 \'template-curly-spacing\': \'off\', //要求或禁止模板字符串中的嵌入表达式周围空格的使用 parserOptions: { parser: \'babel-eslint\',
tsconfig.jsontsconfig.json 重要字段
{ \"compilerOptions\": { /* 基本选项 */ \"target\": \"es5\", // 指定 ECMAScript 目标版本: \'ES3\' (default), \'ES5\', \'ES6\'/\'ES2015\', \'ES2016\', \'ES2017\', or \'ESNEXT\' \"module\": \"commonjs\", // 指定使用模块: \'commonjs\', \'amd\', \'system\', \'umd\' or \'es2015\' \"lib\": [], // 指定要包含在编译中的库文件 \"allowJs\": true, // 允许编译 javascript 文件 \"checkJs\": true, // 报告 javascript 文件中的错误 \"jsx\": \"preserve\", // 指定 jsx 代码的生成: \'preserve\', \'react-native\', or \'react\' \"declaration\": true, // 生成相应的 \'.d.ts\' 文件 \"sourceMap\": true, // 生成相应的 \'.map\' 文件 \"outFile\": \"./\", // 将输出文件合并为一个文件 \"outDir\": \"./\", // 指定输出目录 \"rootDir\": \"./\", // 用来控制输出目录结构 --outDir. \"removeComments\": true, // 删除编译后的所有的注释 \"noEmit\": true, // 不生成输出文件 \"importHelpers\": true, // 从 tslib 导入辅助工具函数 \"isolatedModules\": true, // 将每个文件做为单独的模块 （与 \'ts.transpileModule\' 类似）. /* 严格的类型检查选项 */ \"strict\": true, // 启用所有严格类型检查选项 \"noImplicitAny\": true, // 在表达式和声明上有隐含的 any类型时报错 \"strictNullChecks\": true, // 启用严格的 null 检查 \"noImplicitThis\": true, // 当 this 表达式值为 any 类型的时候，生成一个错误 \"alwaysStrict\": true, // 以严格模式检查每个模块，并在每个文件里加入 \'use strict\' /* 额外的检查 */ \"noUnusedLocals\": true, // 有未使用的变量时，抛出错误 \"noUnusedParameters\": true, // 有未使用的参数时，抛出错误 \"noImplicitReturns\": true, // 并不是所有函数里的代码都有返回值时，抛出错误 \"noFallthroughCasesInSwitch\": true, // 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿） /* 模块解析选项 */ \"moduleResolution\": \"node\", // 选择模块解析策略： \'node\' (Node.js) or \'classic\' (TypeScript pre-1.6) \"baseUrl\": \"./\", // 用于解析非相对模块名称的基目录 \"paths\": {}, // 模块名到基于 baseUrl 的路径映射的列表 \"rootDirs\": [], // 根文件夹列表，其组合内容表示项目运行时的结构内容 \"typeRoots\": [], // 包含类型声明的文件列表 \"types\": [], // 需要包含的类型声明文件名列表 \"allowSyntheticDefaultImports\": true, // 允许从没有设置默认导出的模块中默认导入。 /* Source Map Options */ \"sourceRoot\": \"./\", // 指定调试器应该找到 TypeScript 文件而不是源文件的位置 \"mapRoot\": \"./\", // 指定调试器应该找到映射文件而不是生成文件的位置 \"inlineSourceMap\": true, // 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件 \"inlineSources\": true, // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性 /* 其他选项 */ \"experimentalDecorators\": true, // 启用装饰器 \"emitDecoratorMetadata\": true // 为装饰器提供元数据的支持