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,笔者测试效果如下: