前端eslint+prettier+lint-staged配置

文章目录

前端eslint+prettier+lint-staged配置
- 前提条件
- 安装eslint开发环境
- 安装prettier开发环境
- 安装lint-staged开发环境
- 主流IDE插件配置
- - VSCode
  - HbuilderX
  - WebStorm

前提条件

确保项目使用npm模块管理，若没有，根目录执行npm初始化生成package.json

npm init

安装eslint开发环境

解决代码质量问题：使用方式有可能有问题 (problematic patterns)

npm install -D eslint eslint-plugin-vue

新建.eslintrc.js配置文件（仅做参考，自行补充）

module.exports = {env: {browser: true,es2021: true,node: true},extends: ['eslint:recommended','plugin:vue/recommended',// 'plugin:vue/vue3-recommended', // Use this if you are using Vue.js 3.x.'plugin:prettier/recommended'],parserOptions: {ecmaVersion: 13,sourceType: 'module'},rules: {// 自定义规则}
}

新建.eslintignore指定eslint忽略文件和目录（仅做参考，自行补充）

node_modules
static
dist
uni_modules

安装prettier开发环境

解决代码风格问题：风格不符合一定规则 (doesn’t adhere to certain style guidelines)

npm install -D prettier eslint-plugin-prettier eslint-config-prettier

新建.prettierrc配置文件（仅做参考，自行补充）

{"semi": false,"singleQuote": true,"endOfLine": "auto","trailingComma": "none","quoteProps": "preserve"
}

安装lint-staged开发环境

用于对Git暂存区中的文件执行代码检测，结合husky用到pre-commit这个hook，在执行commit之前，可以运行一些自定义操作

npm install -D husky lint-staged

在package.json文件中增加节点（仅做参考，自行补充）

"husky": {"hooks": {"pre-commit": "lint-staged"}
},
"lint-staged": {"src/**/*.{js,vue}": ["eslint --fix","git add"]
}

主流IDE插件配置

VSCode

应用商店中搜索扩展插件

ESLint
Prettier - Code formatter
Vetur

任意插件右键选择扩展设置，找到在setting.json中打开

增加以下内容

"editor.formatOnSave": false,
"editor.tabSize": 2,
"editor.autoClosingQuotes": "always",
"javascript.preferences.quoteStyle": "single",
"vetur.validation.template": false,
"eslint.enable": true,
"eslint.run": "onType",
"editor.codeActionsOnSave": {// For ESLint"source.fixAll.eslint": true,// For TSLint"source.fixAll.tslint": true,// For Stylelint"source.fixAll.stylelint": true
},
"eslint.options": {"extensions": [".js", ".ts", ".vue"]
}

HbuilderX

插件市场搜索eslint安装

eslint-plugin-vue
eslint-js

找到两个插件的配置，将以下选项打勾

保存时自动修复
启用实时校验

WebStorm

打开Settings/Preferences对话框(Ctrl+Alt+S)，进入Languages and Frameworks| JavaScript |Code Quality Tools| ESLint，并选择Run ESLint——fix on save复选框