在vscode上开发个人项目的时候，代码风格随你定，弄出花也没人说，可是一旦是团队项目，那就得注意代码风格了。举个常见例子来说，A修改了代码，并格式化成2个缩进，B也同时同一份代码，但格式化成4个缩进，这时候代码提交的时候就会存在冲突，需要花费大量的时间在格式上。






eslint pritter实现code换行_代码风格


那么解决方案有三步

  1. 使用Settings Sync拓展同步用户设置
  2. 使用eslint统一代码风格
  3. 使用git预检查工具在提交前检验

使用Settings Sync拓展

在之间的文章说过

不可否者vscode是一款好用的IDE，可是仍存在着一些小缺陷，为了方便在不同设备上使用统一的用户配置（团队协作时特别有用，确保代码风格统一），这里推荐一款vscode 插件 Settings Sync。

在项目开始的时候，我们要求团队成功的用户配置是一样的，这样可以确保代码风格一致。相关教程请移步 使用Settings Sync同步你的vscode配置。

使用Eslint

使用脚手架创建vue项目的时候会提示是否使用eslint，如果选用了而代码风格不符合规范，将在控制台中输出警告，此时代码仍然可以运行。

如果不是没有选用eslint或者不是vue项目，我们可以在ide中按照eslint拓展来帮助我们定位错误代码。


eslint pritter实现code换行_git_02


搜索并按照ESLint拓展


其他非vscode用户也可以安装相关的ide拓展

安装完成后将直接在代码上显示提示信息。

eslint有两个重要的配置文件，需要在项目根目录创建

1   .eslintignore
2   .eslintrc.js

.eslintignore eslint需要过滤检查的资源
.eslintrc.js eslint 检查规则
下面是简单的配置

# .eslintignore
node_modules/ # 忽略node_modules文件夹
/dist/        # 忽略检查dist文件夹
// .eslintrc.js
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential', 
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

其中我们需要注意的是.eslintrc.js文件下的rules配置，比如希望关闭eslint的console检测，我们再rules中添加一条规则

'no-console': 0

具体规则可以看官网或提示，配置属性为0或off可以关闭指定检查。

当然，处理代码检查，eslint还支持代码修复，简单的代码风格eslint可以直接修复，比如我们希望eslint修复src文件夹下的js文件，那么在package.json中添加一条自定义命令

# 安装eslint模块
$ npm install eslint --save-dev
# 添加eslint修复命令
"lint-fix": "eslint --fix --ext .js src/"

执行 npm run lint-fix 将自动修复。无法修复的将在控制台给出提示。

使用git预检查工具

原则上每次git commit前我们都需要先执行一下 lint-fix命令的，避免遗忘或者偷懒，我们使用预检查工具进行处理。
husky 是一个npm模块，可以在git提交前做拦截，如果拦截返回异常信息，将取消提交。

安装husky

$ npm install husky --save-dev

添加拦截事件precommit

# package.json
"precommit": "npm run lint-fix"

在提交前自动执行eslint修复命令，如果成功全部修复就可以正常提交，如果没有全部修复，将取消提交，避免无法团队代码。

愉快的提交代码

这样就确保了开发者本地的代码格式化是统一的，而且提交到线上的代码也是严格要求的。