安装的插件

image.png

安装的依赖

全局安装的依赖 ：commitizen

image.png

项目结构及配置文件

image.png

配置文件说明

• .vscode/setting.json : 该配置的优先级高于vscode全局的setting.json
• 二个忽略文件，.eslintignore和.prettierignore。其中的如下配置无效，愿意待摸索。

!/src  //忽略src目录之外的文件的规范检查

配置步骤

配置git全局配置

对于设置end_of_line为 lf 的项目，需要设置全局core.autocrlf，否则拉下来的项目默认会使用CRLF

git config --list --global  查看配置
git config --global set core.autocrlf false

配置EditorConfig

如果setting.json中打开了 Use Editor Config 开关，则prettier会解析项目根目录下的.editorconfig文件，支持的配置有：

• end_of_line
• indent_style
• indent_size/tab_width
• max_line_length

.editorconfig
# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Tab indentation
[*]
indent_style = tab
trim_trailing_whitespace = true

# The indent size used in the `package.json` file cannot be changed
# https://github.com/npm/npm/pull/3180#issuecomment-16336516
[{*.yml,*.yaml,package.json}]
indent_style = space
indent_size = 2
end_of_line = crlf

配置prettier

https://prettier.io/playground

npm install prettier -D

$ .prettierrc
{
    "arrowParens": "always",
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": false,
    "jsxSingleQuote": false,
    "printWidth": 80,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "none",
    "useTabs": false,
    "vueIndentScriptAndStyle": false
}
$ .vscode/setting.json
{ 
  // 指定哪些文件不参与搜索
  "search.exclude": {
    "**/node_modules": true,
    "dist": true,
    "yarn.lock": true
  },
  "editor.formatOnSave": true,
  "[javascript]": {
    "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"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

配置eslint

安装eslint

 npm install eslint -D

生成.eslintrc.js文件

npx eslint --init

Which style guide do you want to follow? 选择了Airbnb
会根据选择安装一些依赖,包括eslint-config-airbnb-base。
.eslintrc.js extends字段，默认使用的就是图片中配置的规则

// 使用aribnb-base的eslint规则,优先级比rules中低
    // https://github.com/prettier/eslint-config-prettier
    // 将prettier加在最后-Turns off all rules that are unnecessary or might conflict with Prettier.

    extends: ['airbnb-base', 'prettier'],

image.png

$ .eslintrc.js 
module.exports = {
    root: true,
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    // 使用aribnb-base的eslint规则,优先级比rules中低
    // https://github.com/prettier/eslint-config-prettier
    // 将prettier加在最后-Turns off all rules that are unnecessary or might conflict with Prettier.
    extends: ['airbnb-base', 'prettier'],
    // extends: ['eslint:recommended'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaVersion: 12,
        sourceType: 'module'
    },
    plugins: ['@typescript-eslint'],
    settings: {
        'import/resolver': {
            node: {
                extensions: ['.ts', '.js', '.tsx', '.jsx', 'json']
            }
        },
        'import/extensions': ['.ts', '.js', '.tsx', '.jsx', 'json'],
        'import/newline-after-import': 'off'
    },
    rules: {
        quotes: ['off', 'any', { avoidEscape: true }],
        'no-unused-vars': [
            'off',
            { vars: 'all', args: 'after-used', ignoreRestSiblings: true }
        ],
        'linebreak-style': ['error', 'windows'],
        // 0 = off, 1 = warn, 2 = error
        'import/prefer-default-export': 'off',
        'import/extensions': [
            'off',
            'ignorePackages',
            {
                ts: 'never',
                js: 'never',
                mjs: 'never',
                jsx: 'never'
            }
        ],
        'import/no-unresolved': [
            'off',
            { commonjs: true, caseSensitive: true }
        ],
        // 最后一行的逗号
        'comma-dangle': ['error', 'never'],
        'max-len': [
            'error',
            100,
            2,
            {
                ignoreUrls: true,
                ignoreComments: true,
                ignoreRegExpLiterals: true,
                ignoreStrings: true,
                ignoreTemplateLiterals: true
            }
        ],
        'class-methods-use-this': ['off'],
        'no-tabs': 'off',
        'no-use-before-define': [
            'off',
            { functions: true, classes: true, variables: true }
        ],
        'no-useless-return': 'off',
        'no-empty': 'off',
        'max-classes-per-file': ['off', 5],
        'no-console': 'off',
        'no-shadow': 'off',
        'no-new': 'warn',
        'no-empty-function': 'off'
    }
};

配置解决prettier 和 eslint冲突

npm install eslint-config-prettier -D

https://github.com/prettier/eslint-config-prettier
在.eslintrc.js 文件的extends 字段的最后添加prettier

extends: ['airbnb-base', 'prettier']

配置自动fix代码不规范问题

$ .vscode/setting.json 中添加如下配置
      //eslint
    "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
    "typescript.tsdk": "./node_modules/typescript/lib", // 代替 vscode 的 ts 语法智能提示
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
    },

提交规范配置

参考网站
http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html
https://github.com/commitizen/cz-cli
https://dev.to/typicode/what-s-new-in-husky-5-32g5
https://typicode.github.io/husky/#/?id=migrate-from-v4-to-v6

// husky安装4.0的版本，后面的husky配置和版本对应，5.0之后的配置不同
npm install @commitlint/cli @commitlint/config-conventional husky@4.0.0-D
npm install -g commitizen

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

$ .huskyrc.json
{
    "hooks": {
        "pre-commit": "npm test",
        "commit-msg": "commitlint --config .commitlintrc.js -E HUSKY_GIT_PARAMS"
    }
}

提交规范,建议使用如下命令:

git cz

若手动提交,则格式如下: 注意冒号前没有空格,冒号后有空格,refactor 是前缀,需是有效字段.
refactor: 代码规范&提交规范

commit-msg 的有效前缀在如下文件：
./commitlintrc.js 文件中

下一期：整理通用的规范发布npm包。使得在新项目中执行 init命令配置完成。