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

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

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

在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐