zoukankan      html  css  js  c++  java
  • lint代码风格工具整理

    1.lint-stage+husky

    npm install --save-dev lint-staged husky

    配置:可在.huskyrc.js  或者package.json

    https://www.npmjs.com/package/husky

    "husky": {
        "hooks": {
          "pre-commit": "lint-staged"
        }
      },
      "lint-staged": {
        "*.{js,jsx}": [
          "prettier --write",
          "eslint --fix",
          "git add"
        ],
        "*.{html,vue,css,sass,scss}": [
          "stylelint --fix",
          "git add"
        ]
      },

    lint-staged是一个可以提供运行脚本校验文件的插件平台;可以根据不同文件执行不同的命令(Lint-staged,一个仅仅过滤出Git代码暂存区文件(被committed的文件)的工具,并不像eslint那样需要配置忽略配置

    ;配置内的文件全量遍历检查)

    https://github.com/okonet/lint-staged#readme

    执行命令若有需要用到环境变量;用cross-env插件添加

    Use environment variables with linting commands
    Linting commands do not support the shell convention of expanding environment variables. To enable the convention yourself, use a tool like cross-env.
    
    For example, here is jest running on all .js files with the NODE_ENV variable being set to "test":
    
    {
      "*.js": ["cross-env NODE_ENV=test jest --bail --findRelatedTests"]
    }

    lint-staged使用style-lint

    Stylelint for CSS with defaults and for SCSS with SCSS syntax
    {
      "*.css": "stylelint",
      "*.scss": "stylelint --syntax=scss"
    }
    Run PostCSS sorting and Stylelint to check
    {
      "*.scss": ["postcss --config path/to/your/config --replace", "stylelint"]
    }

    2.eslint:  extends(standard airbnb)

    vscode可以安装eslint插件+prettier插件,并配置好vscode  settings.json  :https://www.cnblogs.com/little-ab/articles/9521771.html

    eslint:recommended这个是默认规则,https://eslint.org/docs/rules/ 上可以查recommended的有什么规则

    例如debugger默认是不允许的

    参考:https://www.cnblogs.com/jiaoshou/p/12250278.html  lint-staged

    3.stylelint

    https://stylelint.io/user-guide/get-started

    https://github.com/hudochenkov/stylelint-order

    参考:https://www.cnblogs.com/jiaoshou/p/11284204.html

    react版本配置参考:https://www.cnblogs.com/xiaohuochai/p/9078154.html

    规则翻译:https://blog.csdn.net/sinat_31511831/article/details/54377837?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-18.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-18.nonecase

    vscode可以安装style lint plus插件,插件会读取配置本地配置表

    //vscode  setting.json
     "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true,
          "source.fixAll.stylelint": true,
        },
        "css.validate": false,
        "less.validate": false,
        "scss.validate": false,
        "stylelint.enable": true,
        "stylelint.autoFixOnSave": true,
    npm install -D -save-dev stylelint stylelint-config-standard
    
    //stylelint是运行工具,stylelint-config-standard是stylelint的推荐配置,


    npm i --save-dev stylelint-order css-properties-sorting

    //stylelint-order是CSS属性排序插件(默认先写定位,再写盒模型,再写内容区样式,最后写 CSS3 相关属性)。
    //css-properties-sorting(自动修复排序,若安装此插件,需删除processors: ["stylelint-processor-html"])

    .stylelintrc或者 .stylelintrc.js

    "processors": ["@mapbox/stylelint-processor-arbitrary-tags"], //该插件用于解析vue单文件里的css
      "plugins": [
        "stylelint-order",
        "stylelint-scss"
        ],
      "extends": ["stylelint-config-standard","css-properties-sorting"],
      "rules": {
      //"order/order": [ "declarations", "custom-properties", "dollar-variables", "rules", "at-rules" ] 
    "order/order": [ "custom-properties", "declarations" ],
      //"order/properties-order":["position","top",...]
    "color-no-invalid-hex": true, "unit-no-unknown": true, "property-no-unknown": true, "selector-pseudo-class-no-unknown": true, "selector-pseudo-element-no-unknown": true, "comment-no-empty": true, "number-leading-zero": "always", "number-no-trailing-zeros": true, "declaration-colon-space-after": "always", "declaration-colon-space-before": "never",
       "indentation": 2,
       "media-feature-name-no-vendor-prefix": true,
       "at-rule-no-vendor-prefix": true,
       "selector-no-vendor-prefix": true,
       "property-no-vendor-prefix": true,
       "value-no-vendor-prefix": true,
       "max-nesting-depth": 3 } }
    // .stylelintignore
    # 旧的不需打包的样式库 
    *.min.css
    # 其他类型文件
    *.js
    *.jpg
    *.woff
    # 测试和打包目录
    /test/
    /dist/
    # 通过反取忽略目录
    /src/component/*
    !/src/component/CompA
    !/src/component/CompB
    # 这样的效果是除 CompA 和 CompB 外其他目录都会被忽略

    //.stylelintrc.js  还可以配置property order
    //https://github.com/hudochenkov/stylelint-order/blob/master/rules/properties-order/README.md
    //分块排序 块之间还可以加空格
    "order/properties-order": [ // 指定声明块内属性的字母顺序
          'position',
          'top',
          'right',
          'bottom',
          'left',
          'z-index',
          'display',
          'float',
          'width',
          'height',
          'max-width',
          'max-height',
          'min-width',
          'min-height',
          'padding',
          'padding-top',
          'padding-right',
          'padding-bottom',
          'padding-left',
          'margin',
          'margin-top',
          'margin-right',
          'margin-bottom',
          'margin-left',
          'margin-collapse',
          'margin-top-collapse',
          'margin-right-collapse',
          'margin-bottom-collapse',
          'margin-left-collapse',
          'overflow',
          'overflow-x',
          'overflow-y',
          'clip',
          'clear',
          'font',
          'font-family',
          'font-size',
          'font-smoothing',
          'osx-font-smoothing',
          'font-style',
          'font-weight',
          'hyphens',
          'src',
          'line-height',
          'letter-spacing',
          'word-spacing',
          'color',
          'text-align',
          'text-decoration',
          'text-indent',
          'text-overflow',
          'text-rendering',
          'text-size-adjust',
          'text-shadow',
          'text-transform',
          'word-break',
          'word-wrap',
          'white-space',
          'vertical-align',
          'list-style',
          'list-style-type',
          'list-style-position',
          'list-style-image',
          'pointer-events',
          'cursor',
          'background',
          'background-attachment',
          'background-color',
          'background-image',
          'background-position',
          'background-repeat',
          'background-size',
          'border',
          'border-collapse',
          'border-top',
          'border-right',
          'border-bottom',
          'border-left',
          'border-color',
          'border-image',
          'border-top-color',
          'border-right-color',
          'border-bottom-color',
          'border-left-color',
          'border-spacing',
          'border-style',
          'border-top-style',
          'border-right-style',
          'border-bottom-style',
          'border-left-style',
          'border-width',
          'border-top-width',
          'border-right-width',
          'border-bottom-width',
          'border-left-width',
          'border-radius',
          'border-top-right-radius',
          'border-bottom-right-radius',
          'border-bottom-left-radius',
          'border-top-left-radius',
          'border-radius-topright',
          'border-radius-bottomright',
          'border-radius-bottomleft',
          'border-radius-topleft',
          'content',
          'quotes',
          'outline',
          'outline-offset',
          'opacity',
          'filter',
          'visibility',
          'size',
          'zoom',
          'transform',
          'box-align',
          'box-flex',
          'box-orient',
          'box-pack',
          'box-shadow',
          'box-sizing',
          'table-layout',
          'animation',
          'animation-delay',
          'animation-duration',
          'animation-iteration-count',
          'animation-name',
          'animation-play-state',
          'animation-timing-function',
          'animation-fill-mode',
          'transition',
          'transition-delay',
          'transition-duration',
          'transition-property',
          'transition-timing-function',
          'background-clip',
          'backface-visibility',
          'resize',
          'appearance',
          'user-select',
          'interpolation-mode',
          'direction',
          'marks',
          'page',
          'set-link-source',
          'unicode-bidi',
          'speak'
        ]
    // webpack.conf.js
    const StyleLintPlugin = require('stylelint-webpack-plugin');
     
    module.exports = {
        ...
        'plugins': [
            ...
            new StyleLintPlugin({
                'files': ['**/*.{html,vue,css,sass,scss}'],
                'fix': false,
                'cache': true,
                'emitErrors': true,
                'failOnError': false
            })
        ]

    4.commitlint &commitizen 

    https://github.com/commitizen/cz-cli

    参考:https://www.cnblogs.com/jiaoshou/p/11190619.html

    VSCode可以用 vscode-commitizen ,Open the command panel (ctrl+shift+p or command+shift+p) and type 'conventional commit'.

    安装命令如下。
    
    npm install --save-dev commitizen
    
    初始化项目以使用cz-conventional-changelog适配器
    
    npx commitizen init cz-conventional-changelog --save-dev --save-exact
    
    安装完可以在script添加命令或者:npx git-cz

    /**
     * feat:新增功能
     * fix:bug 修复
     * docs:文档更新
     * style:不影响程序逻辑的代码修改(修改空白字符,格式缩进,补全缺失的分号等,没有改变代码逻辑)
     * refactor:重构代码(既没有新增功能,也没有修复 bug)
     * perf:性能, 体验优化
     * test:新增测试用例或是更新现有测试
     * build:主要目的是修改项目构建系统(例如 glup,webpack,rollup 的配置等)的提交
     * ci:主要目的是修改项目继续集成流程(例如 Travis,Jenkins,GitLab CI,Circle等)的提交
     * chore:不属于以上类型的其他类型,比如构建流程, 依赖管理
     * revert:回滚某个更早之前的提交
    */
     

    强制使用commitizen

    https://www.cnblogs.com/jiaoshou/p/11190619.html

    https://segmentfault.com/a/1190000016503661

    Husky
    For husky users, add the following configuration to the project's package.json:
    
    "husky": {
      "hooks": {
        "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",  //限制不给直接用commit
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"  //commitlint检测 git commit -m '测试提交'时将触发commit-msg事件钩子 } }

    使用commitlint校验(结合使用commitizen,husky)

    npm install --save-dev @commitlint/cli @commitlint/config-conventional

    commitlint.config.js,当然也可以是 .commitlintrc.js里配置

    module.exports = { extends: ['@commitlint/config-conventional'] };
    
    module.exports
    = { extends: ['@commitlint/config-conventional'], rules: { 'type-enum': [2, 'always', [ "feat", "fix", "docs", "style", "refactor", "test", "chore", "revert" ]], 'subject-full-stop': [0, 'never'], 'subject-case': [0, 'never'] } };
    https://commitlint.js.org/#/

    rule由name和配置数组组成,如: name:[0, 'always', 72] ,数组中第一位为 level ,可选 0,1,2 ,0为禁用规则,1为警告,2为错误,
    第二位为应用与否,可选 always|never ,第三位该rule的值。 上面我们就完成了commitlint的安装与提交规范的制定。
    检验commit message的最佳方式是结合git hook,所以需要配合Husky。

       'type-case': [0],
        'type-empty': [0],
        'scope-empty': [0],
        'scope-case': [0],
        'subject-full-stop': [0, 'never'],
        'subject-case': [0, 'never'],
        'header-max-length': [0, 'always', 72]
     

    5.conventional-changelog-cli

    //安装
    npm install -g conventional-changelog-cli
    
    //-p angular用来指定使用的commit message 
    conventional-changelog -p angular -i CHANGELOG.md -s
    
    //使用atom的commit message 
    conventional-changelog -p atom -i CHANGELOG.md -s
    
    
    参数-i CHANGELOG.md表示从 CHANGELOG.md 读取 changelog, -s 表示读写 changelog 为同一文件。
    需要注意的是,上面这条命令产生的 changelog 是基于上次 tag 版本之后的变更(Feature、Fix、Breaking Changes等等)所产生的,
    所以如果你想生成之前所有 commit 信息产生的 changelog 则需要使用这条命令: $ conventional
    -changelog -p angular -i CHANGELOG.md -s -r 0 其中 -r 表示生成 changelog 所需要使用的 release 版本数量,默认为1,全部则是0。
    {
      "scripts": {
        "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"
      }
    }

     6.standard-version

    https://github.com/conventional-changelog/standard-version

    https://www.cnblogs.com/zivxiaowei/p/10089201.html

    standard-version will then do the following:

    1. Retrieve the current version of your repository by looking at bumpFiles[1], falling back to the last git tag.
    2. bump the version in bumpFiles[1] based on your commits.
    3. Generates a changelog based on your commits (uses conventional-changelog under the hood).
    4. Creates a new commit including your bumpFiles[1] and updated CHANGELOG.
    5. Creates a new tag with the new version number.
    npm install -g standard-version
    或者
    npm install --save-dev standard-version
    
    //1. git pull origin master
    //2. 根据 pacakage.json 中的 version 更新版本号,更新 changelog
    //3. git add -A, 然后 git commit
    //4. git tag 打版本操作
    //5. push 版本 tag 和 master 分支到仓库
    //其中2,3,4则是 standard-version 工具会自动完成的工作
    npm run release -- --first-release  第一次发布
    --release-as, -r 指定版本号
    
    //默认情况下,工具会自动根据 主版本(major),次版本( minor) or 修订版(patch) 规则生成版本号,
    例如如果你package.json 中的version 为 1.0.0, 那么执行后版本号则是:1.0.1。
    // standard-version -r minor // output 1.1.0 // standard-version -r 2.0.0 // output 2.0.0 // standard-version -r 2.0.0-test // output 2.0.0-test --prerelease, -p 预发版本命名 // standard-version --prerelease alpha // output 2.0.0-alpha.0 --tag-prefix, -t 版本 tag 前缀 // standard-version --tag-prefix "stable-" // output tag: stable-v2.0.0 //集成 npm "scripts": { "release": "./scripts/release.sh", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md && npm run changeissueurl", "changeissueurl": "replace 'https://github.com/myproject/issues/' 'https://redmine.example.com/' CHANGELOG.md" },
    //release.sh 
    
    #!/bin/bash
    
    # Release branch
    master="master"
    prefix="DTinsight_v"
    
    git pull origin $master
    echo "Current pull origin $master."
    
    # Auto generate version number and tag
    standard-version -r $release --tag-prefix $prefix
    
    git push --follow-tags origin $master
    
    echo "Git push origin $master"
    echo "Release finished."
    //https://github.com/conventional-changelog/standard-version#lifecycle-scripts
    //
    
    //Lifecycle Scripts
    
    {
      "standard-version": {
        "scripts": {
          "prebump": "echo 9.9.9"
        }
      }
    }

    总体参考:https://segmentfault.com/a/1190000017797243

  • 相关阅读:
    .net注册iis
    hdu 1081To The Max
    hdu 1312Red and Black
    hdu 1016Prime Ring Problem
    hdu 1159Common Subsequence
    hdu 1372Knight Moves
    hdu 1686Oulipo
    hdu 1241Oil Deposits
    hdu 1171Big Event in HDU
    hdu 4006The kth great number
  • 原文地址:https://www.cnblogs.com/little-ab/p/12860032.html
Copyright © 2011-2022 走看看