关于前端:vscode前端工程配置

目标

工程配置次要是为了可能在团队开发中对立代码标准，防止因为代码格调不对立或其它不统一的问题导致的整合抵触

• 编辑器格调（EditorConfig、prettier）
• 代码标准和校验（eslint、stylint）
• git 提交标准（commitlint）

参考文章：我是这样搭建 Typescript+React 我的项目环境的

vscode 必备插件

• gitignore
• EditorConfig For vs Code
• Prettier – Code formatter
• ESLint
• stylelint

package.json

初始化package.json:

npm init -y

.gitignore

ctrl+shift+p 号召命令面板，输出 Add gitignore 命令，新建 .gitignore

或者间接新建：

touch .gitignore

.npmrc

对立 npm 依赖源

# 创立 .npmrc 文件
touch .npmrc
# 在该文件内输出配置
registry=https://registry.npm.taobao.org/

因为我的项目中会用到 react 和typescript，所以先装上这两个依赖包：

npm install typescript -D

npm install react react-dom -S

README.md

新建 README 文件

touch README.md

EditorConfig

.editorconfig是跨编辑器保护统一编码格调的配置文件

vscode装置插件EditorConfig，根目录新建文件.editorconfig:

touch .editorconfig

输出以下配置：

root = true

[*]
indent_style = tab
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf

[*.md]
trim_trailing_whitespace = false

• indent_style 缩进格调，可选配置有 tab 和 space
• indent_size 缩进大小
• charset 编码格局
• trim_trailing_whitespace 去除多余的空格
• insert_final_newline 在尾部插入一行
• end_of_line 换行符

更多配置能够查看 EditorConfig

Prettier

Prettier对立我的项目格调

prettier 依赖包

npm install prettier -D

根目录新建文件.prettierrc:

touch .prettierrc

输出以下配置：

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": true,
  "endOfLine": "lf",
  "printWidth": 120,
  "bracketSpacing": true,
  "arrowParens": "always"
}

• trailingComma 对象的最初一个属性开端增加,
• tabWidth 缩进大小
• semi 开端是否增加分号
• singleQuote 是否单引号
• jsxSingleQuote jsx 语法是否单引号
• endOfLine 与 .editorconfig 保持一致设置
• printWidth 单行代码最长字符长度，超过之后会主动格式化换行
• bracketSpacing 花括号外面有空格 {a:1} => {a: 1}
• arrowParens 箭头函数的参数括号包裹 (a)=>{}

更多配置请查看 Prettier Playground

prettier 插件

vscode 装置扩大 Prettier – Code formatter

根目录下新建文件夹.vscode，再此文件夹下新建settings.json:

mkdir .vscode
touch .vscode/settings.json

该文件的配置优先于 vscode 全局的 settings.json，不过要在工作区 workspace 的根目录下才会失效。

settings.json配置：

{
  // 指定哪些文件不参加搜寻
  "search.exclude": {
    "**/node_modules": true,
    "dist": true,
    "build": true,
    "yarn.lock": true,
    "package-lock.json": true
  },
  "editor.formatOnSave": true,
  "": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[javascriptreact]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[typescriptreact]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "[markdown]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter":"esbenp.prettier-vscode"}
}

ESLint

装置 eslint

npm install eslint -D

装置胜利后，执行以下命令：

npx eslint --init

//termail
1、How would you like to use ESLint?
= To check syntax, find problems, and enforce code style
2、What type of modules does your project use?
= JavaScript modules (import/export)
3、Which framework does your project use?
= React
4、Does your project use TypeScript?
= Typescript
5、Where does your code run?
= Browser & Node
6、How would you like to define a style for your project?
= Use a popular style guide
7、Which style guide do you want to follow?
= Airbnb
8、What format do you want your config file to be in?
= JavaScript
9、Would you like to install them now with npm?
= Yes

对生成的 .eslintrc.js 文件，还要做以下批改：

• 依据 eslint-config-airbnb 官网阐明，如果要开启 React Hooks 的查看，须要在 extends 中增加一项 'airbnb/hooks'。
• 依据 @typescript-eslint/eslint-plugin 官网阐明，在 extends 中增加 'plugin:@typescript-eslint/recommended' 可开启针对 ts 语法举荐的规定定义。
• 须要增加一条很重要的 rule，不然在 typescript 中通过 import 导入会报错

增加以下规定到 rules：

rules: {
  'import/extensions': [
    ERROR,
    'ignorePackages',
    {
      ts: 'never',
      tsx: 'never',
      json: 'never',
      js: 'never',
    },
  ],
}

增加 settings 配置：

settings: {
    'import/resolver': {
        node: {extensions: ['.tsx', '.ts', '.js', '.json'],
        },
    },
},

ESLint 和 Prettier 的抵触

配置完会发现，vscode始终在标红，因为 eslint 的配置规定跟 prettier 抵触了

装置 eslint-config-prettier:

npm install eslint-config-prettier -D

增加以下配置到 .eslintrc.js 的 extends 中：

{
  extends: [
    // other configs ...
    'prettier',
    'prettier/@typescript-eslint',
    'prettier/react',
    'prettier/unicorn',
  ]
}

eslint 扩大插件

• eslint-plugin-promise 让你把 Promise 语法写成最佳实际
• eslint-plugin-unicorn 提供了更多有用的配置项

npm install eslint-plugin-promise eslint-plugin-unicorn -D

批改 .eslintrc.js 文件如下：

const OFF = 0;
const WARN = 1;
const ERROR = 2;

module.exports = {
    env: {
        browser: true,
        es2020: true,
        node: true
    },
    extends: [
        'airbnb',
        'airbnb/hooks',
        'plugin:react/recommended',
        'plugin:unicorn/recommended',
        'plugin:promise/recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',
        'prettier/@typescript-eslint',
        'prettier/react',
        'prettier/unicorn'
    ],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaFeatures: {jsx: true},
        ecmaVersion: 11,
        sourceType: 'module'
    },
    plugins: ['react', 'unicorn', 'promise', '@typescript-eslint'],
    settings: {
        'import/resolver': {
            node: {extensions: ['.tsx', '.ts', '.js', '.json']
            },
            typescript: {}}
    },
    rules: {
        'import/extensions': [
            ERROR,
            'ignorePackages',
            {
                ts: 'never',
                tsx: 'never',
                js: 'never'
            }
        ],
        'import/no-extraneous-dependencies': [ERROR, { devDependencies: true}],
        'import/prefer-default-export': OFF,
        'import/no-unresolved': ERROR,

        'unicorn/better-regex': ERROR,
        'unicorn/prevent-abbreviations': OFF,
        'unicorn/filename-case': [
            ERROR,
            {
                cases: {
                    // 中划线
                    kebabCase: true,
                    // 小驼峰
                    camelCase: true,
                    // 下划线
                    snakeCase: false,
                    // 大驼峰
                    pascalCase: true
                }
            }
        ],
        'unicorn/no-array-instanceof': WARN,
        'unicorn/no-for-loop': WARN, // 应用 for of 和 .entries 代替传统的 for 循环
        'unicorn/prefer-add-event-listener': [
            ERROR,
            {excludedPackages: ['koa', 'sax']
            }
        ],
        'unicorn/prefer-query-selector': ERROR,
        'unicorn/no-null': OFF,
        'unicorn/import-style': OFF,

        '@typescript-eslint/no-useless-constructor': ERROR,
        '@typescript-eslint/no-empty-function': WARN,
        '@typescript-eslint/no-var-requires': OFF,
        '@typescript-eslint/explicit-function-return-type': OFF,
        '@typescript-eslint/explicit-module-boundary-types': OFF,
        '@typescript-eslint/no-explicit-any': OFF,
        '@typescript-eslint/no-unused-vars': [OFF],

        'react/jsx-filename-extension': [ERROR, { extensions: ['.tsx', 'ts', '.jsx', 'js'] }],
        'react/jsx-indent-props': [ERROR, 'tab'],
        'react/jsx-indent': [ERROR, 'tab'],
        'react/jsx-one-expression-per-line': OFF,
        'react/destructuring-assignment': OFF,
        'react/state-in-constructor': OFF,
        'react/jsx-props-no-spreading': OFF,
        'react/prefer-stateless-function': OFF,

        'jsx-a11y/click-events-have-key-events': OFF,
        'jsx-a11y/no-noninteractive-element-interactions': OFF,

        'lines-between-class-members': [ERROR, 'always'],
        indent: [ERROR, 'tab', { SwitchCase: 1}],
        'linebreak-style': [ERROR, 'unix'],
        semi: [ERROR, 'always'],
        'no-unused-expressions': WARN,
        'no-plusplus': OFF,
        'no-console': OFF,
        'no-unused-vars': OFF,
        'no-use-before-define': OFF,
        'class-methods-use-this': ERROR,
        'global-require': OFF
    }
};

eslint vscode 配置

ESLint 插件能够提供编辑器主动修复性能

装置实现增加配置到 .vscode/settings.json：

  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "typescript.tsdk": "./node_modules/typescript/lib", // 代替 vscode 的 ts 语法智能提醒
  "editor.codeActionsOnSave": {"source.fixAll.eslint": true,},

.eslintignore 和 .prettierignore

新建 .eslintignore 和 .prettierignore:

touch .eslintignore .prettierignore

输出以下内容：

/node_modules
/build
/dist

StyleLint

接下来对立款式格调，装置两个的依赖包包：

npm install stylelint stylelint-config-standard -D

我的项目根目录新建 .stylelintrc.js 文件:

touch .stylelintrc.js

输出以下内容：

module.exports = {extends: ['stylelint-config-standard'],
  rules: {
    'comment-empty-line-before': null,
    'declaration-empty-line-before': null,
    'function-name-case': 'lower',
    'no-descending-specificity': null,
    'no-invalid-double-slash-comments': null,
    'rule-empty-line-before': 'always',
  },
  ignoreFiles: ['node_modules/**/*', 'build/**/*'],
}

• extends 预设规定扩大
• rules 具体的规定
• ignoreFiles 疏忽配置字段

vscode同步配套插件 stylelint

.vscode/settings.json中新增以下代码：

{
    // 应用 stylelint 本身的校验即可
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
}

stylelint extends 和 stylelint plugins

• stylelint-config-rational-order 对关联属性进行分组和排序
• stylelint-declaration-block-no-ignored-properties 矛盾款式疏忽

npm install stylelint-order stylelint-config-rational-order stylelint-declaration-block-no-ignored-properties -D

批改配置文件如下：

module.exports = {extends: ['stylelint-config-standard', 'stylelint-config-rational-order'],
  plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties'],
  rules: {
    'plugin/declaration-block-no-ignored-properties': true,
    'comment-empty-line-before': null,
    'declaration-empty-line-before': null,
    'function-name-case': 'lower',
    'no-descending-specificity': null,
    'no-invalid-double-slash-comments': null,
    'rule-empty-line-before': 'always'
  },
 ignoreFiles: ['node_modules/**/*', 'build/**/*', 'dist/**/*']
};

解决 Stylelint 和 Prettier 的抵触

装置 stylelint-config-prettier:

npm install stylelint-config-prettier -D

增加以下配置到 .stylelintrc.js 的 extends 中：

{
    extends: [
    // other configs ...
    'stylelint-config-prettier'
  ]
}

lint 命令

咱们在 package.json 的 scripts 中减少以下三个配置：

 "scripts": {
    "lint": "npm run lint-eslint && npm run lint-stylelint",
    "lint-eslint": "eslint -c .eslintrc.js --ext .ts,.tsx,.js src",
    "lint-stylelint": "stylelint --config .stylelintrc.js src/**/*.{less,css,scss}"
  },

lint-staged

只针对 git 缓存区最新改变过的文件进行 格式化 和 lint 规定校验

husky

husky能够提供一些钩子，比方执行 git commit 之前的钩子 pre-commit，借助这个钩子咱们就能执行 lint-staged 所提供的代码文件格式化及 lint 规定校验。

如果我的项目开始前没有初始化的 .git 文件，要先初始化 git，否则 husky 会装置失败:

git init

装置 lint-staged 和 husky :

npm install husky lint-staged -D

在 package.json 中增加以下代码:

{
  "husky": {
    "hooks": {"pre-commit": "lint-staged",}
  },
  "lint-staged": {"*.{ts,tsx,js}": ["eslint --config .eslintrc.js"],
    "*.{css,less,scss}": ["stylelint --config .stylelintrc.js"],
    "*.{ts,tsx,js,json,html,yml,css,less,scss,md}": ["prettier --write"]
  },
}

commitlint + changelog

在多人合作的我的项目中，如果 git 的提交阐明精准，在前期合作以及 bug 解决时会变得有据可查，我的项目的开发能够依据标准的提交阐明疾速生成开发日志，从而不便开发者或用户追踪我的项目的开发信息和性能个性。
倡议浏览 Commit message 和 Change log 编写指南（阮一峰）

commitlint 能够帮忙咱们在 git commit 时校验 message 格局是否符合规范，conventional-changelog 能够帮忙咱们疾速生成 changelog

commitizen 能够在命令行中进行可视化的 git commit 操作，这里不作配置

装置 commitlint 相干依赖:

npm install @commitlint/cli @commitlint/config-conventional -D

@commitlint/config-conventional 相似 eslint 配置文件中的 extends，它是官网举荐的 angular 格调的 commitlint 配置，提供了大量的 lint 规定

根目录新建文件 .commitlintrc.js :

touch .commitlintrc.js

写入以下代码：

/**
 * build : 扭转了 build 工具 如 webpack
 * ci : 继续集成新增
 * chore : 构建过程或辅助工具的变动
 * feat : 新性能
 * docs : 文档扭转
 * fix : 修复 bug
 * perf : 性能优化
 * refactor : 某个已有性能重构
 * revert : 撤销上一次的 commit
 * style : 代码格局扭转
 * test : 减少测试
 * anno: 减少正文
 */

module.exports = {extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['build', 'ci', 'chore', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', 'anno'],
    ],
  },
};

package.json 的 husky 配置，减少一个钩子：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint --config .commitlintrc.js -E HUSKY_GIT_PARAMS"
    }
  },
}

-E HUSKY_GIT_PARAMS 简略了解就是会拿到咱们的 message，而后 commitlint 再去进行 lint 校验。

装置依赖changelog：

npm install conventional-changelog-cli -D

在 package.json 的 scripts 下减少一个命令:

{
  "scripts": {"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",},
}

之后就能够通过 npm run changelog 生成 angular 格调的 changelog，须要留神的是，下面这条命令产生的 changelog 是基于上次 tag 版本之后的变更（feat、fix 等等）所产生

测试：

# 提交所有变动到缓存区
git add -A
# 把暂存区的所有批改提交到分支
git commit -m "chore: add commitlint to force commit style"

git push origin master