前端eslint+prettier+lint-staged配置_hbuilderx "vetur.validation.template": false

前端eslint+prettier+lint-staged配置

前提条件

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

npm init
1

安装eslint开发环境

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

npm install -D eslint eslint-plugin-vue
1

新建.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: {
  	// 自定义规则
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

node_modules
static
dist
uni_modules
1
2
3
4

安装prettier开发环境

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

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

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

{
  "semi": false,
  "singleQuote": true,
  "endOfLine": "auto",
  "trailingComma": "none",
  "quoteProps": "preserve"
}
1
2
3
4
5
6
7

安装lint-staged开发环境

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

npm install -D husky lint-staged
1

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

"husky": {
    "hooks": {
		"pre-commit": "lint-staged"
    }
},
"lint-staged": {
	"src/**/*.{js,vue}": [
		"eslint --fix",
		"git add"
	]
}
1
2
3
4
5
6
7
8
9
10
11

主流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"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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复选框