将WebStorm配置符合ESLint规范的方式开发Vue.js项目

2020年07月16日 前端开发 80点热度 1人点赞 0条评论

Jetbrains全家桶用起来顺手,但是在用Webstorm 或者phpstorm做Vue.js的项目时,Webstorm 或者Phpstorm的认配置和ESLint 的语法检测规则冲突,进行格式化时就会导致ESLint各种报错。今天长沙网站建设就和给大家说一说怎么配置Webstorm(Phpstorm)符合ESLint规范的方式开发Vue.js项目。(Webstrom和Phpstorm的配置方式相同)

首先说一下,今天长沙网站建设要说的WebStorm (Phpstorm)的配置我们分如下步骤来走:

  1. 使用 Vue CLI 手动创建项目
  2. 启用 ESLint 检查
  3. 统一缩进风格
  4. 函数名与空号间加上空格
  5. 去除 JavaScript 语句结尾分号
  6. 使用单引号替换双引号

Vue CLI 设置

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

使用Vue CLI 创建项目时需要注意的设置

使用Vue CLI 创建项目时需要注意的设置

我们使用Vue CLI 的方式手动的进行Vue 项目的创建

使用Vue CLI创建项目

使用Vue CLI创建项目

需要注意的是,在创建项目时,我们需要启用 Linter / Formatter ,其他项目可以按需选择

启用代码检查

启用代码检查

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

ESLint的模式选择

ESLint的模式选择

我们最终的Vue CLI配置如下图所示:

Vue CLI最终的配置

Vue CLI最终的配置

接下来做Webstorm (Phpstorm)的配置,使我们的 IDE 编辑器自带的格式化和 ESLint 配置相符。

启用 ESLint 检查

一般来说使用上面的步骤创建完项目以后,IDE 已经自动为我们打开了这个检查。将 JavaScript 的版本设置为 ES6 ,设置的位置是:Lauguages & Farmeworks ▶ JavaScript

设置ES6

设置ES6

设置好 ES6 之后我们来启用Webstorm的 ESLint 检查,设置的方法:Editor ▶ JavaScript ▶ Code Quality Tools ▶ ESLint

Webstorm配置ESLint检查

Webstorm配置ESLint检查

这样我们就为Webstorm编辑器启用了 ESLint 检查。

统一缩进风格

把 HTML 的缩进设置为 2,记得和 ESLint 的配置.eslintrc.js 文件以及.editorconfig 文件相统一,设置方法是:Editor ▶ Code Style ▶ HTML ▶ Tabs and Indents

配置Webstorm的HTML缩进

配置Webstorm的HTML缩进

同时解决 *.vue 文件中 <script> 块缩进不正确的问题,在 Other 选项卡中的 Do not indent children of: 新增 script 字段,配置方法:Editor ▶ Code Style ▶ HTML ▶ Other  如下图示:

解决script标签的缩进问题

解决script标签的缩进问题

将 JavaScript 的缩进也修改为 2,如下图所示:

为Webstorm配置javascript缩进

为Webstorm配置javascript缩进

函数名与空号间加上空格

类似这种效果 data () {},勾选 Function declaration parentheses 即可实现,配置方法:  Editor ▶ Code Style ▶ JavaScript ▶ Spaces 如下图示:

Webstorm配置函数名前加空格

Webstorm配置函数名前加空格

去除 JavaScript 语句结尾分号

在 ESLint 中建议语句结尾去除分号 ;,所以需要在格式化 JavaScript 中设置一下,不然格式化代码的时候 ESLint 就会检测到错误。配置的位置:Editor ▶ Code Style ▶ JavaScript ▶ Punctuation 如下图示:

Webstorm去除javascript最后的分号

Webstorm去除javascript最后的分号

使用单引号替换双引号

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

Webstorm配置单引号替换双引号

Webstorm配置单引号替换双引号

对象内部的空格处理

就像这样 { User },勾选 Object literal braces 即可实现,配置方法:Editor ▶ Code Style ▶ JavaScript ▶ Spaces

以上就是长沙网站建设在使用WebStorm时配置符合ESLint规范的方式开发Vue.js项目的方式,希望对各位有帮助。

标签:

建站我帮您

保持饥渴的专注,追求最佳的品质

文章评论