开发环境配置

package.json 依赖版本控制
VScode的环境配置项
如果不使用脚手架配置文件：
- 插件安装
- 插件配置
MIFE dotfiles
- 提交前检查

nvm：node管理工具
nrm：npm管理工具
通过nvm安装node

package.json 依赖版本控制

为了避免部分库升级带来的不兼容等问题，做如下规定：

不允许直接使用 git 地址引用的三方库版本
使用遵循 semver 语义化版本控制规范的库，如若不遵循可考虑更换替代品或者锁死版本
不允许使用 ^ 进行控制版本
非特殊原因，统一使用最小版本控制，如：”react”: “~16.5.2”
旧项目如出现依赖版本问题，请自行优化调整

为了避免运行环境不一致造成的问题，做如下规定：
明确在 package.json 添加 engines 配置，声明开发环境版本要求
确保将生成的包锁 package-lock.json 提交到源代码控制，以确保团队中其他人或 CI 安装得到相同的依赖关系树

如对 npm-package-locks 有疑问，请阅读官方文档。

项目根目录下统一配置 .npmrc 文件管理依赖：

save-prefix=”~” registry=https://pkgs.d.xiaomi.net/artifactory/api/npm/mi-npm/ @mi:registry=https://pkgs.d.xiaomi.net/artifactory/api/npm/mi-npm/

使用规定的脚手架生成项目

我们会统一维护 package.json 里的版本，统一升级 CLI 及模板。比如中后台应用统一使用 @mi/hi-create-app 等工具

VScode的环境配置项

.editorconfig

# MIFE dotfiles
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

Workspace Settings

// MIFE dotfiles
{
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": [
    "typescript",
    "typescriptreact",
    "javascript",
    "javascriptreact"
  ],
  "stylelint.useLocal": true,
  "stylelint.autoFixOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.fixAll.stylelint": true,
    "source.organizeImports": false
  }
}

如果不使用脚手架配置文件：

插件安装

安装 ESlint 、prettier 、stylelint以及相关辅助插件 ```tsx npm install -D eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-standard prettier eslint-config-prettier eslint-plugin-prettier

npm install -D stylelint stylelint-config-standard stylelint-config-recommended-scss stylelint-scss


- 如果是 JavaScript 环境，需要额外安装如下插件： 
```tsx
npm install -D babel-eslint

如果是 TypeScript 环境，需要额外安装如下插件：

npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

插件配置

在项目根目录下创建 .eslintrc.js 、.stylelintrc.js文件
```
touch .eslintrc.js 
touch .stylelintrc.js
```
如果是 JavaScript 环境，在 .eslintrc.js 中填充如下内容 ```tsx

MIFE dotfiles

module.exports = { parser: ‘babel-eslint’, root: true, env: { browser: true, es2021: true }, extends: [‘plugin:react/recommended’, ‘standard’, ‘prettier’], parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: 12, sourceType: ‘module’ }, plugins: [‘react’, ‘react-hooks’, ‘prettier’], settings: { react: { version: ‘detect’ } }, rules: { ‘prettier/prettier’: [ ‘error’, { singleQuote: true, semi: false, printWidth: 100, trailingComma: ‘none’ } ], ‘react/prop-types’: 0, ‘react/no-children-prop’: 0, ‘react-hooks/rules-of-hooks’: 2, ‘react-hooks/exhaustive-deps’: 1, ‘no-case-declarations’: 0 }, ignorePatterns: [‘!.*.js’] }


- 如果是 TypeScript 环境，在 .eslintrc.js 中填充如下内容
```tsx
# MIFE dotfiles
module.exports = {
  parser: '@typescript-eslint/parser',
  root: true,
  env: {
    browser: true,
    es2021: true
  },
  extends: ['plugin:react/recommended', 'standard', 'prettier', 'prettier/@typescript-eslint'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: ['@typescript-eslint', 'react', 'react-hooks', 'prettier'],
  settings: {
    react: {
      version: 'detect'
    }
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: false,
        printWidth: 100,
        trailingComma: 'none'
      }
    ],
    'no-use-before-define': 0,
    '@typescript-eslint/no-use-before-define': ['error', { typedefs: false, functions: false }],
    'react/prop-types': 0,
    'react/no-children-prop': 0,
    'react-hooks/rules-of-hooks': 2,
    'react-hooks/exhaustive-deps': 1,
    'no-case-declarations': 0
  },
  ignorePatterns: ['!.*.js']
}

在 .stylelintrc.js 中填充如下内容

module.exports = {
// 引入标准配置文件和scss配置扩展
extends: ['stylelint-config-standard', 'stylelint-config-recommended-scss'],
rules: {
  // 引号必须为单引号
  'string-quotes': ['single'],
  // url值必须使用单引号包裹
  'function-url-quotes': ['always'],
  // 冒号后要加空格
  'declaration-colon-space-after': ['always'],
  // 冒号前不加空格
  'declaration-colon-space-before': ['never'],
  // 变量后必须添加!default，本地局部变量可以不加
  'scss/dollar-variable-default': [true, { ignore: 'local' }],
  // 属性单独成行
  'declaration-block-single-line-max-declarations': [1],
  // 属性和值前不带厂商标记（通过autofixer自动添加，不要自己手工写）
  'property-no-vendor-prefix': [true],
  'value-no-vendor-prefix': [true],
  // 多选择器必须单独成行，逗号结尾
  'selector-list-comma-newline-after': ['always'],
  // 不要使用@while
  'at-rule-blacklist': ['while'],
  // 不能使用颜色名定义颜色，只能使用HEX、rgab或hsl格式
  'color-named': ['never'],
  // 不能有无效的16进制颜色值
  'color-no-invalid-hex': [true]
},
ignoreFiles: ['src/**/*.tsx', 'src/**/*.ts', 'src/**/*.jsx', 'src/**/*.js']
}

提交前检查

安装 husky 和 lint-staged
```
npm install -D husky lint-staged
```

配置 package.json 进行代码提交检查集成

{
"scripts": {
  "precommit": "lint-staged"
},
"lint-staged": {
  "*.{ts,tsx,js,jsx}": "eslint --fix",
    "*.{css,scss}": "stylelint --fix"
},
"husky": {
  "hooks": {
    "pre-commit": "npm run precommit"
  }
}
}