前端eslint+prettier+lint-staged配置

西瓜蓬蓬

已于 2022-03-26 20:50:05 修改

阅读量845

点赞数

分类专栏：前端文章标签：前端 vue.js javascript npm es6

于 2022-02-23 19:17:50 首次发布

本文链接：https://blog.csdn.net/ac1992122633/article/details/123097195

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端eslint+prettier+lint-staged配置

文章目录

前端eslint+prettier+lint-staged配置

前提条件

确保项目使用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"]
}