一、 EditorConfig

https://editorconfig.org/

EditorConfig 有助于维护跨多个编辑器和 IDE 从事同一项目的多个开发人员的一致编码风格。EditorConfig 项目包含一个用于定义编码样式的文件格式和一个文本编辑器插件集合,这些文本编辑器插件使编辑器可以读取文件格式并遵循定义的样式。EditorConfig 文件易于阅读,并且可以与版本控制系统很好地协同工作。

配置

# http://editorconfig.org
# top-most EditorConfig file 表示是最顶层的配置文件,发现设为true时,才会停止查找.editorconfig文件
root = true

[*]
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 使用空格键缩进(tab、space)
indent_size = 2 # 缩进 2 个字符
end_of_line = lf # 换行符(lf、cr、crlf)
insert_final_newline = true # 设为 true 表示使文件在保存时以换行符结尾
trim_trailing_whitespace = true # 设置为 true 会删除文件中换行符之前的所有空白字符

[*.md] # 针对 markdown 文件设置风格
insert_final_newline = false
trim_trailing_whitespace = false

无需插件

无需插件

下载插件

https://editorconfig.org/#download

要将 EditorConfig 与这些编辑器之一一起使用,您将需要安装插件。

下载插件

二、ESLint-Plugin-Vue

https://eslint.vuejs.org/user-guide/

1. 安装

vue add @vue/cli-plugin-eslint

2. 选项

# Pick an ESlint config
> Prettier

三、ESLint

javascript 代码检测、格式化工具。

https://eslint.org/

编辑器/IDE 配置

https://eslint.org/docs/user-guide/integrations#editors

Sublime

https://github.com/SublimeLinter/SublimeLinter-eslint

IntelliJ IDEA, RubyMine, WebStorm, PhpStorm, PyCharm, AppCode, Android Studio, 0xDBE

https://plugins.jetbrains.com/plugin/7494-eslint

Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

配置

// .eslintrc.js

module.exports = {
  root: true,
  extends: [
    "eslint:recommended",
    "plugin:vue/essential",
    "@vue/prettier",
    "prettier"
  ],
  env: {
    es6: true,
    node: true,
    browser: true
  },

  parserOptions: {
    parser: "babel-eslint"
  },

  plugins: ["vue"],

  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

四、Prettier

支持多种语言的代码格式化工具。

https://prettier.io/

语言支持

语言支持

编辑器/IDE 配置

https://prettier.io/docs/en/editors.html

编辑器/IDE 支持

Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

WebStorm

https://prettier.io/docs/en/webstorm.html

Sublime Text

https://packagecontrol.io/packages/JsPrettier

配置

// .prettierrc.js

module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  endOfLine: 'lf'
};

五、Git Hooks

安装

npm install husky lint-staged --save-dev

配置(package.json)

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

六、预期

Vue 风格指南

https://cn.vuejs.org/v2/style-guide/

保存时检测、格式化代码

Git Commit 时检测、格式化代码

手动格式化代码

1. CMD/CTRL + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD/CTRL + Shift + P -> Format Selection

转载请注明出处: https://blog.givebest.cn/other/2020/12/05/editorconfig-eslint-prettier-husky-lint-staged-unified-team-vue-code-style.html