持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

前言

上篇文章讲到，最近在写新的项目，然后是基于旧的项目改造的。

然后上篇文章讲了配置vue的代码校验遇到的问题，这篇文章主要是总结格式化工具的配置以及依赖的问题总结。

问题

配置prettier和eslint

因为之前项目是把校验关了，所以当我把lintOnSave开了之后，好家伙，满屏的错误，比如双引号，分号结尾，使用等号而不是全等等等

所以就想通过配置工具来帮我更改。

我用的编辑器是vscode，它的插件很多也很强大，这里可以使用插件来做代码自动化格式化。

代码格式化用的比较多的有2种，prettier和eslint。

安装好prettier后，然后在vscode的settings.json配置规则。（通过ctrl或command + shift + p打开settings.json）

    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.semi": false,
    "prettier.singleQuote": true,
    "prettier.trailingComma": "none"

默认格式化为prettier,然后去除分号，使用单引号，以及句尾不要有逗号，还有其它规则，可以看这里

大部分规则都能满足了。但是有个问题无法解决，没有看到配置项。就是函数的名称和参数的括号不能保持空格。 这个和eslint的规则有冲突。

可以通过"javascript.format.insertSpaceBeforeFunctionParenthesis": true解决，但是得设置"vetur.format.defaultFormatter.js": "vscode-typescript"，不是prettier。

下面再来看看eslint。

开启eslint格式化校验（在settings.json中加入）

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

如果你想修改规则，可以在项目的.eslintrc.js里配置。

Cannot read property 'range' of null

项目运行的时候突然报了错，错误信息是Cannot read property 'range' of null。但是我搜索整个项目，并没有发现有使用range这个字段。

后面查阅资料，可能是babel-eslint的版本不兼容。我使用的是10.0.1,然后我把它降级到7.2.3。

"babel-eslint": "^7.2.3"

再运行，就没有报错了。