使用WebStorm开发Vue3项目

ops/2025/2/22 11:13:13/

记录一下使用WebStorm开发Vu3项目时的配置

现在WebStorm可以个人免费使用啦！??

基本配置

打包工具：Vite
前端框架：ElementPlus
开发语言：Vue3、TypeScript、Sass
代码检查：ESLint、Prettier
IDE：WebStorm 2024.2

首先说一下版本兼容问题，ElementPlus>=2.8.5需要Sass>=1.79.0，但是升级了Sass后，会导致Element提示很多警告，猜测原因是因为Sass在后续版本修改了一些语法规则，而Element没有跟进修改。这些警告虽然不影响代码运行，但是看着糟心，目前只能等待官方后续更新了。

搭建Vue3项目

通过Vite搭建Vue3项目

npm create vite@latest my-vue-app -- --template vue-ts
  1. my-vue-app为项目文件夹名称
  2. vue-ts表示使用包含typescript的vue项目模板搭建

安装后的目录结构

├─ index.html
├─ package.json
├─ tsconfig.json #typescript配置文件
├─ tsconfig.app.json #typescript配置文件，本项目的ts配置，自动引用到tsconfig.json中
├─ tsconfig.node.json #typescript配置文件，为vite服务的ts配置，自动引用到tsconfig.json中
├─ vite.config.ts #vite配置文件
├─ src
│  ├─ assets #静态文件
│  ├─ components #组件
│  ├─ App.vue
│  ├─ main.ts

安装框架和其他工具包

修改项目根目录下的package.json文件，添加前端框架和其他依赖包

{"name": "my-vue-app","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview"},"dependencies": {"vue": "^3.5.12","element-plus": "^2.8.1"},"devDependencies": {"@vitejs/plugin-vue": "^5.1.4","typescript": "~5.6.2","vite": "^5.4.10","vue-tsc": "^2.1.8","sass": "^1.77.0","unplugin-auto-import": "^0.18.3","unplugin-vue-components": "^0.27.4","@eslint/js": "^9.13.0","@rushstack/eslint-patch": "^1.10.4","eslint-plugin-prettier": "^5.2.1","eslint-plugin-promise": "^6.6.0","eslint-plugin-vue": "^9.29.0","typescript-eslint": "^8.10.0","@vue/eslint-config-prettier": "^10.0.0","@vue/eslint-config-typescript": "^14.1.1"}
}
  1. unplugin-auto-import和unplugin-vue-components为自动导入工具，可在编写代码时，可以无需import ref from 'vue'而直接使用ref，工具配置后会自动导入组件。
  2. 名称中包含eslint的依赖包为ESLint规则，后续在eslint.config.js中配置。
  3. 正如一开始所说，由于ElementPlus和Sass版本过高会出现警告的问题，所以目前安装的低版本，等待官方修复问题后，再升级版本。

运行安装依赖

npm install

如果安装时间过久，或者提示网络超时，可以切换npm源后再重新安装

# 切换为淘宝镜像
npm config set registry https://registry.npmmirror.com/
配置vite：vite.config.ts
import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite';
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
import Components from 'unplugin-vue-components/vite';
import path from 'path';export default defineConfig(({ mode }) => {// 环境变量const env = loadEnv(mode, process.cwd(), '');return {plugins: [vue(),AutoImport({// 自动导入的组件imports: ['vue', 'vue-router'],// 解析器：当前使用了ElementPlus的解析器resolvers: [ElementPlusResolver()],// 开启eslinteslintrc: { enabled: true },}),Components({// 解析器：当前使用了ElementPlus的解析器resolvers: [ElementPlusResolver({ importStyle: 'sass' })],// 以下文件夹中的组件自动导入dirs: ['src/components'],}),],resolve: {alias: {// 设置路径别名'@': path.resolve(__dirname, './src'),},},server: {// 网络请求代理proxy: {'/t/': {target: env.VITE_SERVER,changeOrigin: true,},},},};
});

运行项目

npm run dev

运行后会自动生成文件auto-imports.d.ts和components.d.ts，又因为AutoImport开启了eslintrc，还会生成文件.eslintrc-auto-import.json

配置eslint：eslint.config.ts

目前使用的eslint9版本，配置文件与之前版本的写法可能不一致。
注意：WebStorm2024版本才支持eslint9版本的配置文件。

创建eslint配置文件eslint.config.js

import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import autoImport from './.eslintrc-auto-import.json' assert { type: 'json' };export default [{ files: ['**/*.{js,mjs,cjs,ts,vue}'] },// 导入auto-import插件配置（目前暂不支持eslint9）{ files: ['**/*.{js,mjs,cjs,ts,vue}'], languageOptions: autoImport },pluginJs.configs.recommended,...tseslint.configs.recommended,...pluginVue.configs['flat/essential'],{ files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },// 自定义规则{rules: {// 使用any类型时提示警告'@typescript-eslint/no-explicit-any': 'warn',},},eslintPluginPrettierRecommended,
];
  1. 由于目前unplugin-auto-import并不支持eslint9，所以需要导入.eslintrc-auto-import.json文件消除错误提示。
  2. 一般来说eslint-plugin-prettier的规则要放在最后，保证它的规则不会被覆盖。
  3. 如果要增加更多规则，请查看eslint配置文档。
修改ts配置：tsconfig.app.json

修改ts配置，添加上一步自动生成的.d.ts文件，添加后就不会提示Vue的导入错误了。

# 在include中添加文件名
{"compilerOptions": {...}"include": [..., "auto-imports.d.ts", "components.d.ts"]
}

修改WebStorm设置

  • 选择自动ESLint配置，编辑器会自动寻找根目录下的.eslint.config.js文件。
  • 勾选eslint --fix会在保存文件时自动格式化代码。
    在这里插入图片描述
    在这里插入图片描述
    修改后重启一下编辑器，或者重启语言服务中的两个服务。

完成后打开App.vue文件，删除import HelloWorld from './components/HelloWorld.vue'，并没有HelloWorld组件未导入的错误提示，则说明配置生效了。

配置prettier：.prettierrc.json

默认prettier的规则可能不适合个人习惯，可以通过添加.prettierrc.json配置文件进行修改规则

{"semi": true, 	// 句尾增加分号"tabWidth": 4,	//使用4个空格缩进"singleQuote": true,	// 使用单引号"printWidth": 200,	// 超过200字符换行"arrowParens": "avoid",	// 单箭头函数不加括号"bracketSameLine": true	// 对象前后增加空格
}

还有很多规则，可以查看prettier文档。

环境变量env

创建文件.env、.env.development、.env.production分别对应默认配置、开发环境配置、生成环境配置

// .env.development
VITE_SERVER = http://dev.xxx.com
// .env.production
VITE_SERVER = http://pro.xxx.com

修改打包命令

// package.json
{..."scripts":{..."build": "vite build --mode production","build-dev": "vite build --mode development",...}...
}

更多有关环境变量的配置和使用，请查看vite文档。

其他问题

  1. 为什么用了ESLint还要用Prettier，两者分别有什么作用？
    Prettier用于格式化代码，确保缩进、分号、引号、换行等代码格式一致；ESLint则用于代码语法检测，提示错误。
  2. 换行符的问题
    Windows系统使用的换行符为CRLF(/r/n)，而Linux和MacOS使用的是LF(/n)，为了统一，可在.prettierrc.json中添加"endOfLine": "lf"，同时需要修改git配置git config --global core.autocrlf input，表示在提交时将CRLF转换为LF，在检出时不进行转换。默认git会在检出时自动转换为CRLF，此时就会与当前的代码格式不一致，可能会导致冲突。

http://www.ppmy.cn/ops/160495.html

相关文章

游戏引擎学习第113天

游戏引擎学习第113天

仓库:https://gitee.com/mrxiao_com/2d_game_2 黑板：优化的基本过程 在游戏编程中，优化是一个非常重要的学习内容，尤其是想要成为专业开发者时。优化的核心是理解代码的执行速度，以及如何提升其性能。在这个阶段，已经…
阅读更多...
LLaMA-Factory|微调大语言模型初探索(3)，qlora微调deepseek记录

LLaMA-Factory|微调大语言模型初探索(3)，qlora微调deepseek记录

前言 上篇文章记录了使用lora微调llama-1b，微调成功，但是微调llama-8b显存爆炸，这次尝试使用qlora来尝试微调参数体量更大的大语言模型，看看64G显存的极限在哪里。 1.Why QLora? QLoRA 在模型加载阶段通过 4-bit 量化大幅减少了模型权重的显存占用。QLoRA 通过 反量化到 …
阅读更多...
oppo，汤臣倍健，康冠科技，高途教育25届春招内推

oppo，汤臣倍健，康冠科技，高途教育25届春招内推

oppo，汤臣倍健，康冠科技，高途教育25届春招内推 ①康冠科技 【职位】算法、软件、硬件、技术，结构设计，供应链，产品，职能，商务 【一键内推】https://sourl.cn/2Mm9Lk 【内推码】EVBM8…
阅读更多...
【Java学习】多态

【Java学习】多态

目录 一、方法相同 二、方法重写 1.概念 2.条件 三、向上转型 1.概念 2.方式 四、方法绑定 五、多态 一、方法相同 方法相同要求方法名相同、参数列表相同、返回值类型相同(与两方法修饰的访问限定符相不相同、静态非静态状态相不相同无关)，而且在子类与父…
阅读更多...
Linux基础 -- 中断子系统之级联中断

Linux基础 -- 中断子系统之级联中断

Linux 级联中断 (irq_set_chained_handler_and_data) 详解 1. irq_set_chained_handler_and_data() 介绍 1.1. API 定义 void irq_set_chained_handler_and_data(unsigned int irq, irq_flow_handler_t handler, void *data);参数 irq：需要绑定处理函数的中断号&…
阅读更多...
批量给文本中的每行内容加入一行空行

批量给文本中的每行内容加入一行空行

我这里有一个txt的文本内容要处理。需要每6行加入一行空行。 我们可以考虑用python脚本去实现。但是python脚本还要下载python。然后安装以后用cmd去运行python脚本。对不是技术党来说不友好。 我们考虑用现成的notepad工具去实现。首先下载一个notepad的软件。 然后。 用no…
阅读更多...
ICRA2024:CoLRIO,用于机器人群体的激光雷达测距-惯性集中状态估计

ICRA2024:CoLRIO,用于机器人群体的激光雷达测距-惯性集中状态估计

文章目录 摘要I. 引言II. 相关工作A. 激光雷达惯性里程计B. 多机器人定位和映射 III. 相对状态估计框架A. 单个机器人前端B. 群体定位 IV. 实验V. 结论 摘要 摘要 —— 使用不同异构传感器进行协作状态估计对于在无GPS环境中运行的机器人群体来说是一个基本前提，这…
阅读更多...
Windows使用docker部署fastgpt出现的一些问题

Windows使用docker部署fastgpt出现的一些问题

文章目录 Windows使用docker部署FastGPT出现的一些问题1.docker部署pg一直重启的问题2.重启MongoDB之后一直出现“Waiting for MongoDB to start...”3.oneapi启动不了failed to get gpt-3.5-turbo token encoder Windows使用docker部署FastGPT出现的一些问题 1.docker部署pg一…
阅读更多...
最新文章

Copyright @ 2022~2023