webstorm使用配置技巧（Vue版）

前言：每次环境变化都要改相关配置，时间久也较容易忘，本着好记性不如烂笔头，特此进行整理，不完善之处，欢迎评论区补充，这边适时会进行补充进来，整理不易，轻喷~

一、配置新建文件自定义模板

以VUE文件为例：
当新建vue总感觉模板不是很喜欢，可以在配置中进行自定义方法如下：

1、先检查是否安装VUE.js

打开设置：File->Settings->plugins 检查是否安装Vue.js

2、打开 Settings->Editor->Color Scheme->File and Code Templates

找到需要修改的模板，进行编辑，保存。

二、WebStorm不识别’@'路径别名

笔者在新环境或者创建了新项目，时常会出现无法识别@路径别名，如下图：

解决方案1（来自网络）：

1、安装 @vue/cli-service

	npm install @vue/cli-service --save-dev

在File | Settings | Languages & Frameworks | JavaScript | Webpack 选择 node_modules@vue\cli-service\webpack.config.js
然后进行保存即可，不过只适用用于本地环境，如果node_modules@vue\cli-service\webpack.config.js地址不太好记，可以使用下面步骤。

2、在项目根目录下创建 webstorm.config.js，并将下面内容粘贴进去

'use strict'
const webpackConfig = require('@vue/cli-service/webpack.config.js')
module.exports = webpackConfig

3、打开当前项目设置 FIle > Settings 或者 Ctrl + Alt + S，搜索Webpack，将刚刚创建的文件引入

解决方式2 （来自网络，已实践）：

1、找到项目根目录创建jsconfig.json文件

2、在文件中添加如下代码：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

如果没有效果可以尝试重启webstorm，笔者测试效果如下：