虎牙前端代码规范

规范详情: rules.md

衍生规范及其使用说明:

• vue
• react

如何使用

1. 安装依赖

npm install -D eslint
npm install -D @huyafed/eslint-config-huya --registry=https://nexus.huya.com/repository/npm-public/

2. 配置 .eslintrc.js

module.exports = {
  extends: [
    '@huyafed/eslint-config-huya',
  ],
}

如果你通过 cdn 引入了一些全局依赖(比如 TT ), 又不想通过 window.TT 来访问, 那么可以加入 global 属性

module.exports = {
  globals: {
    TT: 'readonly',
  },
  extends: [
    '@huyafed/eslint-config-huya',
  ],

  // 如果代码中引入了测试框架, 那么会带来大量的全局变量
  // 可以设置 env 属性, 避免写大量的 globals
  /*
   * env: {
   *   mocha: true,
   *   jest: true,
   *   jquery: true,
   * },
   */
}

3. 配置 .eslintignore

对于不需要进行规范检查的包, 可以添加到 .eslintignore 文件中

node_modules/
dist/

4. 配置 package.json

添加 npm 命令, 方便检查和 fix

{
  ...
  "scripts": {
    "lint": "eslint --ext .js,.vue,.jsx .",
    "lint:fix": "eslint --ext .js,.vue,.jsx --fix .",
    ...
  }
  ...
}

5. 配置 webpack, 可以在 webpack 的输出中添加 eslint 的检查

# 安装依赖
npm install -D eslint-loader

配置 webpack.conf.js

module.exports = {
  ...
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|vue|jsx)$/,
        loader: 'eslint-loader',
        exclude: [/(.|_)min\.js$/, /node_modules/],
        options: {
          cache: true,
        },
      },
      ...
    ]
  }
  ...
}

6. 配置 git 钩子: 在执行 git commit 时, 自动对代码进行检查, 防止不小心将错误的代码引入代码库

# 安装依赖
npm install -D husky
npm install -D lint-staged

配置 package.json

{
  ...
  "scripts": {
    "lint": "eslint --ext .js,.vue,.jsx .",
    "lint:fix": "eslint --ext .js,.vue,.jsx --fix .",
  }
  "lint-staged": {
    "*.(js|vue|jsx)": "eslint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
  ...
}

搭配编辑器使用

合理配置编辑器后, 可以再编辑器内实时显示规范的错误提示, 也可以设置在保存时自动修复错误(仅限部分)

VSCODE

• 设置缩进为 2 个空格, 并设置按下 tab 时自动输入空格
• 安装 eslint 插件并配置自动修改错误

Sublime Text

• 设置缩进为 2 个空格, 并设置按下 tab 时自动输入空格

  "tab_size": 2,
  "translate_tabs_to_spaces": true,

• 安装 sublimelinter 插件

• 安装 SublimeLinter-eslint 插件

Vim

• 设置缩进为 2 个空格, 并设置按下 tab 时自动输入空格

  autocmd FileType wxss,wxml,ruby,html,css,less,scss,sass,javascript,vue,json,jst,pug setlocal expandtab shiftwidth=2 tabstop=2 softtabstop=2

• 安装 ale 插件并配置 linter

  let g:ale_linters = {
      \ 'javascript': ['eslint'],
      \}