美文网首页
代码规范&提交规范

代码规范&提交规范

作者: 努力学习的小丸子 | 来源:发表于2021-03-30 15:38 被阅读0次

安装的插件

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命令配置完成。

相关文章

  • 代码规范&提交规范

    安装的插件 安装的依赖 全局安装的依赖 :commitizen 项目结构及配置文件 配置文件说明 .vscode/...

  • Git代码提交规范

    Git代码提交规范 前言 为什么要注重代码提交规范? 在团队协作开发时,每个人提交代码时都会写 commit me...

  • 代码提交规范

    适用于Commit message遵循该规则,可以使用 Commitizen 和 validate-commit-...

  • 代码提交规范

    #1 每次代码的提交必须要有注释,注释的格式参考如下:

  • 代码提交规范

    AngularJS在 github上 的提交记录被业内许多人认可,逐渐被大家引用。 格式: type(scope)...

  • iOS 小谈一叙

    一、规范 1) git 提交规范 适当使用git merge / git rebase 2) 代码规范 注意改动别...

  • Git代码提交规范

    一、代码提交规范化的目的 为了部门提交代码信息格式规范化 为了更好的追溯代码、筛选 为了更加快速的定位提交代码所涉...

  • 规范在研发工作中的价值

    在日常的研发工作中,经常会遇到一些规范。编码规范、代码提交日志规范、提测流程规范,版本号规范等等。 这些规范离我们...

  • react-native/expo 添加eslint、prett

    .eslintrc修改 阻止不合规范的代码提交:

  • git分支命名规范

    git 分支命名规范 git 分支命名规范 为规范开发,保持代码提交记录以及 git 分支结构清晰,方便后续维护,...

网友评论

      本文标题:代码规范&提交规范

      本文链接:https://www.haomeiwen.com/subject/tqxghltx.html