配置代码风格一致

前言

随着项目的成长，项目成员越来越多，以及代码管理规范的要求，配置代码风格一致变得渐渐必要起来，风格一致的代码有利于减少格式不一致的带来的冲突，不管项目有多少人参与，代码看起来都出自一人之手，提高了代码的可读性和质量。通过Eslint校验代码语法：

• prettier统一格式化代码。
• 保存自动修复eslint错误，自动格式化代码。

#代码风格一致配置

TIP

推荐使用vscode开发工具，文中的配置适用于vscode

#安装插件包

• ESLint
• Vetur
• Prettier - Code formatter

TIP

• 安装后重启vscode编辑器，防止插件不生效。
• 禁用 Beautify(如果已安装) 插件，该插件会占用格式化代码的快捷键，会和 prettier 产生冲突

#vscode插件配置

打开vscode的 Settings界面，里面有两个设置。

• USER SETTINGS(用户设置)即全局设置，其他项目也会应用这个配置。
• WORKSPACE SETTINGS（工作区设置）即项目设置，会在当前项目的根路径里创建一个.vscode/setting.json文件，然后配置只在当前项目生效。

TIP

如何进入settings界面 + mac系统下，使用快捷键进入（Ctrl + ,），或者点击左上角 Code => 首选项 => Settings

• windows系统下，点击左上角 文件 => 首选项 => 设置

推荐工作区配置，如下：

{
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  //根据文件后缀名定义vue文件类型
  "files.associations": {
    "*.vue": "vue"
  },
  "eslint.options": {
    "extensions": [".js", ".vue"]
  },

  //配置 ESLint 检查的文件类型
  //确定校验准则
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],

  "eslint.autoFixOnSave": true,
  //保存自动格式化
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

#添加配置文件

由于同时使用了 Prettier 和 Eslint ,Eslint 和 Prettier 的配置文件如下：

• .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    es6: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', 'prettier'],
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'space-before-function-paren': 0,
    'comma-dangle': 0,
    proseWrap: 'preserve',
    arrowParens: 'avoid',
    'no-undef': 0,
    'no-unused-vars': 0,
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 强制使用单引号
    quotes: ['error', 'single'],
    semi: ['error', 'never']
  },
  globals: {
    Vue: true,
    weex: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

• .eslintignore

node_modules
.next
.temp
dist
build
lib
plugins
web
package-lock.json

• .prettierrc.js

module.exports = {
  //开启 eslint 支持
  eslintIntegration: true,
  //使用单引号
  singleQuote: true,
  //结尾不加分号
  semi: false
}

• .prettierignore

node_modules
.next
.temp
dist
build
lib
plugins
web
package-lock.json

• .editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120

[*.md]
trim_trailing_whitespace = false

#安装node模块包

"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-vue": "^5.2.3",
"prettier": "^1.18.2",