代码库增加eslint自动进行检查代码并且美化代码

Posted 2021-08-13 vieber

开发环境

node环境v10.15.3
npm环境7.19.1

package.json里面增加

增加hook和脚本

	"scripts": {
 		"lint": "eslint --ext .ts,.js,.vue",
        "lint:fix": "eslint --ext .ts,.js --fix"
    },
    "lint-staged": {
        "*.{js,ts,jsx}": [
            "npm run lint:fix"
        ]
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "config": {
        "commitizen": {
            "path": "./node_modules/cz-conventional-changelog"
        }
    },
    "gitHooks": {
        "pre-push": "node ./node_modules/.bin/validate-commit-msg"
    },

增加依赖包

  "dependencies": {
        "@ecomfe/eslint-config": "^4.0.0",
        "@typescript-eslint/eslint-plugin": "^4.10.0",
        "@typescript-eslint/parser": "^4.10.0",
        "commitizen": "^4.2.2",
        "eslint-config-prettier": "^7.1.0",
        "eslint-plugin-babel": "^5.0.0",
        "eslint-plugin-prettier": "^3.3.0",
        "husky": "^4.0.0",
        "lint-staged": "^10.0.0",
        "prettier": "^2.2.1",
        "validate-commit-msg": "^2.14.0",
        "babel-eslint": "^10.1.0",
        "typescript": "4.1.2",
        "eslint": "^7.16.0",
        "node-sass": "6.0.1",
  },

增加.eslintrc.js

module.exports = {
    root: true,
    // parser: '@typescript-eslint/parser', // Specifies the ESLint parser
    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
    extends: [
        'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
        'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
        'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
    ],
    plugins: ['@typescript-eslint', 'prettier'],
    settings: {},
    env: {
        browser: true,
        node: true,
    },
    globals: {
        atom: true,
    },
    rules: {
        quotes: ['error', 'single'],
        indent: ['error', 4],
        'prettier/prettier': 1,
        // 'no-console': 'error',
        eqeqeq: ['warn', 'always'],
        'prefer-const': ['error', {destructuring: 'all', ignoreReadBeforeAssign: true}],
        // 'operator-linebreak': [2, 'before'],
        '@typescript-eslint/no-explicit-any': ['off'],
        indent: [
            'error',
            4,
            {
                VariableDeclarator: 4,
                SwitchCase: 1,
            },
        ],
        'spaced-comment': ['error', 'always'],
        '@typescript-eslint/no-unused-vars': 0,
        '@typescript-eslint/interface-name-prefix': 0,
        '@typescript-eslint/explicit-member-accessibility': 0,
        '@typescript-eslint/no-triple-slash-reference': 0,
        '@typescript-eslint/ban-ts-ignore': 0,
        '@typescript-eslint/no-this-alias': 0,
        '@typescript-eslint/triple-slash-reference': [
            'error',
            {path: 'always', types: 'never', lib: 'never'},
        ],
    },
};

增加prettier.config.js

module.exports = {
    printWidth: 100, // 每行代码长度（默认80）
    tabWidth: 4, // 每个tab相当于多少个空格（默认2）ab进行缩进（默认false）
    useTabs: false, // 是否使用t
    singleQuote: true, // 使用单引号（默认false）
    semi: true, // 声明结尾使用分号(默认true)
    trailingComma: 'all', // 多行使用拖尾逗号（默认none）
    bracketSpacing: false, // 对象字面量的大括号间使用空格（默认true）
    jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
    // 箭头函数参数括号 默认avoid 可选 avoid| always
    // avoid 能省略括号的时候就省略 例如x => x
    // always 总是有括号
    arrowParens: 'avoid',
    proseWrap: 'preserve',
};

这样写好之后，我之前因为node版本是8的版本，然后运行报错了，去升级node8版本适应的eslint不知道如何去匹配，尝试了一下，出现的问题更多，还把git提交出问题了

然后升级了node10之后，又有一些错误，需要升级一些库的版本，这种方式需要升级的模块比较少，然后就升级了，也跑通了。

小心得

升级完node版本之后，要将node_modules都删掉，然后重新npm install按照这样才行，不会会有很多未知的错误发生。因为某些模块会依赖node版本进行编译。所以最好升级完node版本之后重新安装所有模块。