前端项目配置(prettierrc/eslint/tsconfig.json)

电玩女神 2021-09-02 05:15 507阅读 0赞

[ESLint+Prettier代码规范实践/解决二者冲突问题][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.json ##

### tsconfig.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          // 为装饰器提供元数据的支持
     }
    }

[ESLint_Prettier]: https://www.jianshu.com/p/dd07cca0a48e