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

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

开发环境

node环境v10.15.3 npm环境7.19.1

package.json里面增加

增加hook和脚本

"scripts": { "lint": "eslint --ext .ts,.js,.vue", "lint:fix": "eslint --ext .ts,.js,.vue --fix" }, "lint-staged": { "*.{js,ts,jsx,vue}": [ "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: 'vue-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'], parserOptions: { parser: '@typescript-eslint/parser', // 解析 .ts 文件 }, 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

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

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

小心得

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。