前端 | WebStorm符合ESLint规范开发Vue配置

发表于 更新于 分类于
本文字数： 1.1k 阅读时长 ≈ 2 分钟

Jetbrains 全家桶大发好，但是 webstorm 的开发 Vue 时，默认配置可能会和 ESLint 的语法冲突，进行格式化时各种闹心。但是也不用惊慌，简单的配置几下，即可快乐的敲代码啦

本文内容：

  • 使用 Vue CLI 手动创建项目

  • 启用 ESLint 检查

  • 统一缩进风格

  • 函数名与空号间加上空格

  • 去除 JavaScript 语句结尾分号

  • 使用单引号替换双引号

Vue CLI 设置

新建项目时取消 Use the default project setup (babel, eslint)的勾选

新建项目

Vue CLI 使用手动模式进行创建 Vue 项目

手动创建项目

启用 Linter / Formatter ，其他按需选择

启用检查器

在 Pick a linter / formatter config: 选择Standard配置

ESLint

最终配置如图

最终配置

接下来开始配置 webstorm，以便于 IDE 自带的格式化和 ESLint 配置相符

启用 ESLint 检查

一般来说使用上面的步骤创建完项目以后，IDE 已经自动为我们打开了这个检查

将 JavaScript 的版本设置为 ES6

Lauguages & Farmeworks ▶ JavaScript

设置ES6

启用编辑器的 ESLint 检查

Editor ▶ JavaScript ▶ Code Quality Tools ▶ ESLint

启用ESLint检查

统一缩进风格

将 HTML 的缩进设置为 2，记得和 ESLint 的配置.eslintrc.js文件以及.editorconfig文件相统一

Editor ▶ Code Style ▶ HTML ▶ Tabs and Indents

HTML缩进

同时解决*.vue文件中 <script> 块缩进不正确的问题，在 Other 选项卡中的 Do not indent children of: 新增 script 字段

Editor ▶ Code Style ▶ HTML ▶ Other

解决script块缩进问题

将 JavaScript 的缩进也修改为 2

JavaScript缩进

函数名与空号间加上空格

类似这种效果data () {}，勾选 Function declaration parentheses 即可实现

Editor ▶ Code Style ▶ JavaScript ▶ Spaces

函数名与空号间加上空格

去除 JavaScript 语句结尾分号

在 ESLint 中建议语句结尾去除分号;，所以需要在格式化 JavaScript 中设置一下

Editor ▶ Code Style ▶ JavaScript ▶ Punctuation

去除结尾分号

使用单引号替换双引号

ESLint 建议使用单引号'替换双引号"，在刚刚的选项卡中设置一下

使用单引号

对象内部的空格处理

就像这样{ User }，勾选 Object literal braces 即可实现

Editor ▶ Code Style ▶ JavaScript ▶ Spaces

结尾

暂时想到这么多，以后有空再补充