eslint-config-cs

Background

目前CS FE团队各业务线使用的编码规范不尽相同，导致代码可读性降低、团队间沟通成本增加、入职新人学习成本提高等一系列问题。因此有必要统一js、ts规范，保证团队编码风格的一致性，同时在编码阶段预先避免一些不必要的bug。

Install

npm install --save-dev @shopee/eslint-config-cs

Usage

1.在项目根目录下创建.eslintrc.js文件，拷贝以下内容，亦可添加自定义配置配置

module.exports = {
  root: true,
  extends: [
    '@shopee/eslint-config-cs'
  ],
  rules: {
    // 自定义规则，覆盖共享配置包里面的规则
  },
  env: {
    // 填充你的项目中需要的环境变量
    // browser: true,
    // node: true,
    // jest: true,
    // es6: true,
  },
  globals: {
    // 填充你的项目中需要用到的全局变量
    // 'React': true,
  }
}

2.在项目根目录下创建tsconfig.json文件(已有则忽略)提供当前项目的ts配置信息。配置可参考：

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": ".",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "experimentalDecorators": true
  },
  "include": [
    "src"
  ]
}

VSCode Configuration

创建.vscode目录，并在其下创建settings.json文件，配置如下即可（"保存时修复" - 可以根据个人喜好配置）：

{
  "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
  // 保存时修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

TODO：webstorm配置