Webstorm / VsCode 统一格式化配置 prettier + eslint + lint-staged

前言

vscode 社区提供了大量vue插件，代码格式化一键完成，能根据eslint + perttier自动格式化，甚至还能让属性按照我们的要求去自动排序，简直爽歪歪。

比如说我们的代码是这样的，按照尤大大的代码风格指南，应该是指令 > 属性 > 动态属性 > 事件，如果没有格式化，那我们只能手动一个个的去调整顺序去让他合符规范，虽然能锻炼我们书写的习惯，但是浪费了时间。

大家用的IDE不同，格式化效果也不一样。用VsCode格式化爽歪歪，用webstorm的同学却犯了难接下来我们看看如何让Webstorm 和 vscode 实现统一的格式化操作

IDE设置

VsCode配置

安装eslint

.vscode settings.json

json 复制代码

{
  // 默认使用prettier格式化
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  //配置 ESLint 检查的文件类型
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "html", "vue"],

  // 代码保存时，自动执行ESlint格式化代码
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

按照eslint 规则设置Prettier 格式化

如果出现eslint警告，鼠标右键 -> Source Action -> Fix all fixable eslint

使用eslint规则格式化文档，按照vue风格指南修改vue代码块位置，以及属性位置

快捷键设置

格式化快捷键 Ctrl + Shift + F 默认格式化只能执行prettier操作，但是无法修复eslint错误，只有执行上方Fix all fixable eslint 操作才行

可以按照以下步骤给Fix all fixable eslint 设置快捷键，VsCode快捷键可以重复，同一个操作可以执行多个命令，按照下图设置后 Ctrl + Shift + F 就可以同时执行 Prettier 和 eslint 格式化了

Webstore设置

跟VsCode保持相同格式化操作，设置快捷键

保存自动格式化

鼠标右键格式化

NPM依赖包设置与说明

格式化相关包

arduino 复制代码

eslint js代码的质量检查工具
prettier 代码风格的约束
@babel/eslint-parser // ESLint的Babel解析器代替babel-eslint
@vue/cli-plugin-eslint vue 专门的 ESLint 规则插件
eslint-config-prettier 用 prettier 的规则，覆盖掉 eslint:recommended 的部分规则
eslint-plugin-prettier 将prettier 的能力集成到 eslint 中。
eslint-plugin-vue 用ESLint检查.vue文件的<template>和<script>

perl 复制代码

"@babel/eslint-parser": "^7.12.16",         // ESLint的Babel解析器代替babel-eslint
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",         // vue 专门的 ESLint 规则插件
"@vue/eslint-config-standard": "^6.1.0",    // vue standarad 风格配置
"eslint": "^8.7.0",                         // js代码的质量检查工具
"eslint-config-prettier": "^8.3.0",         // 用 prettier 的规则，覆盖掉 eslint:recommended 的部分规则
"eslint-plugin-prettier": "^4.0.0",         // 将prettier 的能力集成到 eslint 中
"eslint-plugin-vue": "^8.0.3",              // 用ESLint检查.vue文件的<template>和<script>
"prettier": "^2.5.1",                       // 代码风格的约束

初始化Vue项目依赖包

perl 复制代码

"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0",
"eslint": "^8.7.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"lint-staged": "^11.1.2",
"prettier": "^2.5.1",
"vue-eslint-parser": "^8.0.0",
"vue-template-compiler": "^2.6.14"

vue 组件选项的推荐顺序与自动排序

Vue 风格指南

组件/实例的选项应该有统一的顺序。这是我们推荐的组件选项默认顺序。它们被划分为几大类，所以你也能知道从插件里添加的新 property 应该放到哪里。

副作用 (触发组件外的影响)

el

全局感知 (要求组件以外的知识)

name
parent

组件类型 (更改组件的类型)

functional

模板修改器 (改变模板的编译方式)

delimiters
comments

模板依赖 (模板内使用的资源)

components
directives
filters

组合 (向选项里合并 property)

extends
mixins

接口 (组件的接口)

inheritAttrs
model
props / propsData

本地状态 (本地的响应式 property)

data
computed

事件 (通过响应式事件触发的回调)

watch

生命周期钩子 (按照它们被调用的顺序)

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed

非响应式的 property (不依赖响应系统的实例 property)

methods

渲染 (组件输出的声明式描述)

template / render
renderError

使用Eslint自动排序

vue-cli3.0 构建的项目，选择使用eslint 会在package.json 里添加 eslint-plugin-vue 依赖项, 安装插件后在eslint配置中加入plugin:vue/recommended

csharp 复制代码

yarn add eslint-plugin-vue@^8.0.3 -D

.eslintrc.js

java 复制代码

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
      'plugin:vue/essential', 
      'plugin:vue/recommended',  // vue推荐风格
      'eslint:recommended', 
      'plugin:prettier/recommended'
  ]
}

到此为止,就可以在格式化的时候改变代码顺序了, 不想使用插件推荐的顺序，想自己定顺序，也可自定义vue/order-in-components

css 复制代码

rules: {
 "vue/order-in-components": [
   "error",
   {
     "order": [
       "el",
       "name",
       "key",
       "parent",
       "functional",
       ["delimiters", "comments"],
       ["components", "directives", "filters"],
       "extends",
       "mixins",
       ["provide", "inject"],
       "ROUTER_GUARDS",
       "layout",
       "middleware",
       "validate",
       "scrollToTop",
       "transition",
       "loading",
       "inheritAttrs",
       "model",
       ["props", "propsData"],
       "emits",
       "setup",
       "fetch",
       "asyncData",
       "data",
       "head",
       "computed",
       "watch",
       "watchQuery",
       "LIFECYCLE_HOOKS",
       "methods",
       ["template", "render"],
       "renderError"
     ]
   }
 ]
}

提交代码格式校验自动格式化

`yorkie`

一个git钩子工具。vue-cli 创建项目时 nodeModules里面会自动安装yorkie依赖包, yorkie fork 自 husky 但是与 husky 并不兼容。如果安装了husky，需要把husky卸载干净。

`lint-staged`

lint-staged 是一个前端文件过滤工具，它仅过滤 Git 代码暂存区文件。当 git commit 时，pre-commit 钩子会启动，执行 lint-staged 命令。

csharp 复制代码

yarn add lint-staged -D

package.json

json 复制代码

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}

lint-staged.config.js

java 复制代码

module.exports = {
  '*.{js,jsx,vue}': 'vue-cli-service lint'
}

完整的配置

package.json

perl 复制代码

{
  "name": "format-prettier",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "eslint": "^8.7.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "lint-staged": "^11.1.2",
    "prettier": "^2.5.1",
    "vue-eslint-parser": "^8.0.0",
    "vue-template-compiler": "^2.6.14"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}

.eslintrc.js

arduino 复制代码

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
      'plugin:vue/essential', 
      'plugin:vue/recommended', 
      'eslint:recommended', 
      'plugin:prettier/recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

.prettierrc.js

ruby 复制代码

module.exports = {
  eslintIntegration: true, 
  printWidth: 120, // 一行最多 120 字符(默认80)
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  semi: false, // 行尾需要有分号(默认true)
  singleQuote: true, // 使用单引号（默认false）
  quoteProps: 'as-needed', // 对象的 key 仅在必要时用引号
  jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
  trailingComma: 'none', // 多行使用拖尾逗号（默认none）
  bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"（默认true）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行
  arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid:添加括号）
  endOfLine: 'auto' // 行尾换行符
}

lint-staged.config.js

java 复制代码

module.exports = {
  '*.{js,jsx,vue}': 'vue-cli-service lint'
}

Webstorm / VsCode 统一格式化配置 prettier + eslint + lint-staged

前言

IDE设置

VsCode配置

.vscode settings.json

按照eslint 规则 设置Prettier 格式化

快捷键设置

Webstore设置

NPM依赖包设置与说明

vue 组件选项的推荐顺序 与 自动排序

使用Eslint自动排序

提交代码格式校验自动格式化

yorkie

lint-staged

完整的配置

按照eslint 规则设置Prettier 格式化

vue 组件选项的推荐顺序与自动排序

`yorkie`

`lint-staged`