Webstorm2018中配置Vue开发环境详解

最新推荐文章于 2023-11-04 16:35:35 发布

牧云流

最新推荐文章于 2023-11-04 16:35:35 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue.js javascript html5

本文链接：https://blog.youkuaiyun.com/dreamingbaobei3/article/details/100975601

VUE 专栏收录该内容

38 篇文章

订阅专栏

用vue-cli创建好一个项目，如果我们使用Webstorm作为编码工具，会发现代码中有很多编辑器警告，这是因为默认情况下Webstorm对Vue项目的支持不够造成的，为提高编程效率还要进行一些配置。
我的Webstorm版本是2018.1，配置方法如下：

1、安装Vue.js插件，使Webstorm能够识别Vue文件

在Webstorm的File菜单中选择Settings（快捷键：Ctrl+Alt+S）,调出Settings窗口，点击Plugins，在输入框输入vue，将查找到Vue.js插件，安装即可。
安装后Webstorm会重新启动，再看配置是这样的：
在这里插入图片描述
完成这个配置后，Vue文件高亮显示

在这里插入图片描述

2、设置Vue新建文件模板

在设置面板中，可以Editor>File and Code Templates添加和修改创建文件格式和模板，实际上安装Vue.js插件后会默认新增一个模板，可以根据需要修改和新增其他模板
在这里插入图片描述

3、设置vue文件支持的编码格式（Code Style）

在Code Style中没有Vue,那么设置Other File Types的缩进为2
在这里插入图片描述

4、WebStorm添加ES6支持

通常Vue使用es6语法，所以要将javascript的版本改成es6,如果项目中会使用jsx语法，需要选择React JSX。
在这里插入图片描述

5. 设置Eslint代码检查

如果需要webstormEslint代码检查，可以进行设置，不需要则勾选Enable
在这里插入图片描述

6、webstrom格式化代码规则遵循eslint设置

webstorm格式化代码快捷键是 ctrl+alt+L，但是webpack默认的格式化会造成eslint报错

设置->Editor->Code Style-> JavaScript 右上有一个set from

到Spaces选项卡选择如图所示项
设置->Editor->Code Style-> HTML Other选项卡里面有个Do not indent children of 加添加script。

7. 让webstorm识别wepback项目别名@

webpack构建的vue项目中，经常会用到别名alias，别名用于简化路径的写法，vue-cli2创建的项目会自动在build/webpack.base.conf.js文件中配置别名@，代表项目的src目录
在这里插入图片描述
webstorm不能自动识别别名，虽然不会报错，但会出现波浪线提示你"Module not installed"，更加不会有自动补全功能
通过下面的配置，可以解决这两个问题
在settings/languages&framworks/javascript/webpack中指定刚才的配置文件
在这里插入图片描述
vue-cli3开始默认配置改为了vue.config.js文件。webstorm无法识别，可以在项目中新建一个配置文件如alias.config.js，在上面的窗口中指定为webpack的配置文件

alias.config.js

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  resolve: {
    alias: {
      '@': resolve('./src'),
      'components': resolve('./src/components'),
      'views': resolve('./src/views'),
      'assets': resolve('./src/assets')
    }
  }
}

8、解决webstorm提示TypeError: this.cliEngine is not a constructor

如果webstorm提示‘TypeError: this.cliEngine is not a constructor’,是因为webstorm 2018版本对高版本对EsLint不兼容

降低EsLint 版本 6.7.2
```
npm i eslint@5.6.0 -D
```

修改webstorm相关插件
地址是：安装目录/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js
大概在22行

//this.CliEngine = require(this.basicPath + "lib/cli-engine");
this.CliEngine = require(this.basicPath + "lib/cli-engine").CLIEngine;

重启webstorm即可解决

9、添加注释模板

Editor->live Templates
在这里插入图片描述

在符合条件的代码中输入 ///+tab即可添加注释

10、配置git

首先要安装git，并在Git Bash中配置用户名和邮箱

$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"

Version Control–>Git，配置git.exe的安装位置
VCS（版本控制系统）–>Checkout from Version Control–>Git