Webstorm2018中配置Vue开发环境详解

╰+攻爆jí腚メ 2024-04-19 12:16 54阅读 0赞

用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会重新启动，再看配置是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]  
完成这个配置后，Vue文件高亮显示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]

## 2、设置Vue新建文件模板 ##

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

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

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

## 4、WebStorm添加ES6支持 ##

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

## 5. 设置Eslint代码检查 ##

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

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

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

*  设置->Editor->Code Style-> JavaScript 右上有一个set from  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center 1]  
    到Spaces选项卡选择如图所示项  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 5]
 *  设置->Editor->Code Style-> HTML Other选项卡里面有个Do not indent children of 加添加script。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center 2]

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

webpack构建的vue项目中，经常会用到别名alias，别名用于简化路径的写法，vue-cli2创建的项目会自动在build/webpack.base.conf.js文件中配置别名@，代表项目的src目录  
![在这里插入图片描述][20190918141848148.jpg]  
webstorm不能自动识别别名，虽然不会报错，但会出现波浪线提示你"Module not installed"，更加不会有自动补全功能  
通过下面的配置，可以解决这两个问题  
在settings/languages&framworks/javascript/webpack中指定刚才的配置文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 6]  
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  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center 4]  
在符合条件的代码中输入 ///+tab即可添加注释

## 10、配置git ##

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

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

1.  Version Control–>Git，配置git.exe的安装位置  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54mn5LqR5rWB_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]
2.  VCS（版本控制系统）–>Checkout from Version Control–>Git  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54mn5LqR5rWB_size_13_color_FFFFFF_t_70_g_se_x_16]  
    ![在这里插入图片描述][f65dcb17c4484ab390e9dafee6cf38cc.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/cdcc58e1926e4cb9a3b0cedcb346fdf0.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/dd098f3082d54060a9255c0eaa142ed8.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/50664eedf28d4d55882e4589d6bee202.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2f70fe2c1efd44e293b0442e085c07fb.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fee74ee120044ebd975da26058e5980a.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9452f0a400bd40f39e9a88ddebf11de2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/53029e527557418fa22fdb92996c8ada.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/12b82ddb9847443fb5d8c6acd54816ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/509c72244cd94fccb0af401c07992010.png
[20190918141848148.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/64fda4a8c8f8494190c7ca34673285ec.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/dd501db7a52f40bdb22e2fc708fce8fd.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3c94db8513db4abba364d622c72a17ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8d0ff955fc29486abefa1c2b705fd43d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54mn5LqR5rWB_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f22e7497b2fe44189aaaf7f6b329077b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54mn5LqR5rWB_size_13_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5e8f0c5c55fa4273b4bdc959cfbce3c6.png
[f65dcb17c4484ab390e9dafee6cf38cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9a40590a94114fa4ae3ffab724e5b81f.png