通过npm包的方式在项目中引入自己定义的eslint、stylelint规则

链接

安装依赖

  1. npm i eslint-config-zc-base --save-dev
  2. npm i stylelint-config-zc-base --save-dev

安装 vscode 插件

ESlint、stylelint

添加 eslint 配置

在 package.json 里新增字段 eslintConfig。（也可以新建文件stylelintrc）

  1. // vue项目（需要安装 eslint-plugin-vue、babel-eslint）
  2. "eslintConfig": {
  3.     "root": true,
  4.     "extends": [
  5.         "plugin:vue/essential",
  6.         "eslint-config-zc-base"
  7.     ],
  8.     "parserOptions": {
  9.         "parser": "babel-eslint"
  10.     }
  11. }
  13. // node项目引入
  14. "eslintConfig": {
  15.     "root": true,
  16.     "extends": "eslint-config-zc-base"
  17. }
  19. // 小程序
  20. "eslintConfig": {
  21.     "root": true,
  22.     "extends": "eslint-config-zc-base",
  23.     "rules": {
  24.         "no-shadow": 0
  25.     },
  26.     "globals": {
  27.         "env": true,
  28.         "App": true,
  29.         "Page": true,
  30.         "Component": true,
  31.         "wx": true,
  32.         "getApp": true,
  33.         "getPage": true,
  34.         "getCurrentPages": true
  35.     }
  36. },

添加 stylelint 配置

在 package.json 里新增字段 stylelint。（也可以新建文件stylelintrc）

  1. // vue项目
  2. "stylelint": {
  3.     "root": true,
  4.     "extends": "stylelint-config-zc-base"
  5. }
  7. // 小程序项目
  8. "stylelint": {
  9.     "root": true,
  10.     "extends": "stylelint-config-zc-base",
  11.     "rules": {
  12.         "unit-no-unknown": [
  13.             true,
  14.             {
  15.                 "ignoreUnits": [
  16.                     "rpx"
  17.                 ]
  18.             }
  19.         ],
  20.         "selector-type-no-unknown": [
  21.             true,
  22.             {
  23.                 "ignore": [
  24.                     "custom-elements",
  25.                     "default-namespace"
  26.                 ]
  27.             }
  28.         ]
  29.     }
  30. }

新建 .editorconfig，统一编辑器格式

  1. # EditorConfig is awesome: http://EditorConfig.org
  3. root = true
  5. [**]
  6. # utf-8编码
  7. charset = utf-8
  9. ## 换行符
  10. end_of_line = lf
  12. # 结尾插入新行
  13. insert_final_newline = true
  15. # 使用单引号
  16. quote_type = single
  18. # 空格形式缩进
  19. indent_style = space
  20. indent_size = 4
  22. # 去除结尾空格
  23. trim_trailing_whitespace = true
  25. [*.md]
  26. insert_final_newline = false
  27. trim_trailing_whitespace = false

新建 .vscode/settings.json，覆盖本地的 vscode 配置

  1. {
  2.     "editor.formatOnSave": false,
  3.     "editor.codeActionsOnSave": {
  4.         "source.fixAll": true,
  5.         "source.fixAll.eslint": true,
  6.         "source.fixAll.stylelint": true
  7.     },
  8.     "json.schemaDownload.enable": false,
  9.     "eslint.format.enable": true,
  10.     "eslint.validate": ["javascript", "javascriptreact", "vue", "html", "vue-html", "wxml"],
  11.     "eslint.workingDirectories": [{ "mode": "auto" }]
  12. }

新建vue项目的scripts，来实现一键修复lint问题

vue-cli项目

需要安装依赖 @vue/cli-service、@vue/cli-plugin-eslint

  • npm run lint 一键修复所有能自动修复的eslint问题
  • npm run lint-css 检查所有的stylelint问题
  • npm run lint-css:fix 一键修复所有能自动修复的stylelint问题
  1. "scripts": {
  2.     "lint": "vue-cli-service lint",
  3.     "lint-css": "stylelint src/**/*.{css,less,scss,vue}",
  4.     "lint-css:fix": "stylelint src/**/*.{css,less,scss,vue} --fix"
  5. },

react项目或者是webpack项目

  1. "scripts": {
  2.     "lint": "eslint --ext .js,.vue src",
  3.     "lint:fix": "eslint --fix --ext .js,.vue src"
  4.     "lint-css": "stylelint src/**/*.{css,less,scss,vue}",
  5.     "lint-css:fix": "stylelint src/**/*.{css,less,scss,vue} --fix"
  6. },

QA：为什么vue-cli只有lint，而其他项目需要加一个lint:fix的脚本？

  • 因为 vue-cli-service lint 会带自动修复的功能，所以只需要一个脚本
  • eslint只是检查，并不带修复功能。而eslint —fix带修复功能

重启 vscode

此时eslint、stylelint都正常工作了，第一次保存的时候格式化功能可能会比较慢。
如果还不行，继续npm install，或者把node_modules和package-lock.json都删了再重新安装依赖。