使用WebStorm开发Vue3项目

记录一下使用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()],
                // 开启eslint
                eslintrc: { 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则用于代码语法检测，提示错误。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/905876.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

操作系统及MySQL管理系统客户端的介绍

操作系统及MySQL管理系统客户端的介绍

操作系统 1、Windows： 图形化管理工具：如控制面板、设置应用、任务管理器等。 客户端：命令提示符（cmd）和PowerShell用于命令行操作。 2、Linux： 图形化管理工具：如GNOME、KDE等桌面环境中的系…
阅读更多...
基于SSM+小程序的旅游社交登录管理系统（旅游4）

基于SSM+小程序的旅游社交登录管理系统（旅游4）

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 ​ 本旅游社交小程序功能有管理员和用户。管理员有个人中心，用户管理，每日签到管理，景点推荐管理，景点分类管理，防疫查询管理&a…
阅读更多...
一文带你了解：六款适合PC端的工时管理工具

一文带你了解：六款适合PC端的工时管理工具

1. 板栗看板 板栗看板是一个可视化的事项管理工具，由看板（board）、列表（list）、卡片（card）三个基本元素构成。用户通过在 “看板” 上布置和移动 “列表” 与 “卡片”，可以跟踪事项…
阅读更多...
数据结构算法学习方法经验总结

数据结构算法学习方法经验总结

DSA:Data Structures, Algorithms, and Problem-Solving Techniques 三大核心支柱 一次学习一个主题，按照如下顺序学习 如何开始学习新的主题 学习资源 https://www.youtube.com/playlist?listPLDN4rrl48XKpZkf03iYFl-O29szjTrs_O (Algorithms) https://ww…
阅读更多...
ANA基因组数据库（ANAgdb）

ANA基因组数据库（ANAgdb）

ANA进化阶由早期发育的被子植物谱系组成，包括无油樟目（Amborellales）、睡莲目（Nymphaeales）和木兰藤目（Austrobaileyales），在进化上具有重要地位。 ANA基因组数据库（ANA…
阅读更多...
晟矽微PWM案例分析

晟矽微PWM案例分析

/****************************************************************************** ; * 型号 : MC32F7361 ; * 创建日期 : 2021.12.21 ; * 公司/作者 : SINOMCU-FAE ; * 晟矽微技术支持 : 204…
阅读更多...
检索引擎Elasticsearch

检索引擎Elasticsearch

一.为什么要用Elasticsearch 由于我们在运行我们的项目的时候通常都是将数据存到mysql或者sql serve等数据库中，在进行数据搜索时使用sql 语句 like进行模糊匹配查询，其一：虽然可以查到数据，但是它模糊匹配查询速度较慢&#xff0…
阅读更多...
vue前端使用pdfjs与pdfdist-mergeofd 实现预览pdf并翻页，同时解决预览pdf显示模糊的问题

vue前端使用pdfjs与pdfdist-mergeofd 实现预览pdf并翻页，同时解决预览pdf显示模糊的问题

vue前端使用pdfjs与pdfdist-mergeofd 实现预览pdf并翻页，同时解决预览pdf显示模糊的问题 插件介绍 pdfdist-mergeofd插件的作用可查看这篇文章，同时使用ofdjs和pdfjs遇到的问题，和解决方法——懒加载 该插件主要是为了解决pdfjs和ofdjs同时…
阅读更多...
深度学习：yolov3的使用--建立模型

深度学习：yolov3的使用--建立模型

使用argparse模块来定义和解析命令行参数 创建一个ArgumentParser对象 parser argparse.ArgumentParser() 训练的轮数，每批图像的大小，更新模型参数之前累积梯度的次数,模型定义文件的路径。 parser.add_argument("--epochs", typeint, d…
阅读更多...
38.第二阶段x86游戏实战2-HOOK窗口消息机制（解决多开窗口句柄问题）

38.第二阶段x86游戏实战2-HOOK窗口消息机制（解决多开窗口句柄问题）

免责声明：内容仅供学习参考，请合法利用知识，禁止进行违法犯罪活动！ 本次游戏没法给 内容参考于：微尘网络安全 本人写的内容纯属胡编乱造，全都是合成造假，仅仅只是为了娱乐，请不要…
阅读更多...
详解汉明纠错码原理以及FPGA实现

详解汉明纠错码原理以及FPGA实现

文章目录 一、汉明纠错码简介二、汉明码编码原理以及步骤三、汉明码纠错原理以及步骤四、FPGA实现74汉明编码器五、FPGA实现74汉明解码器 一、汉明纠错码简介 汉明纠错码（Hamming Code）是一种用于检测和纠正数据传输中错误的编码方法。它由理查德汉明&am…
阅读更多...
无人机光电识别跟踪算法！

无人机光电识别跟踪算法！

一、算法概述 无人机光电识别跟踪算法结合了可见光和红外成像技术，通过光学系统收集目标的光学信息，并将其转换为电信号进行处理和分析。该算法能够实现对目标的快速、准确识别与追踪，极大提升了无人机在复杂环境下的作业能力和效率。 二、…
阅读更多...
Ethernet 系列（6）-- 基础学习::OSI Model

Ethernet 系列（6）-- 基础学习::OSI Model

（写在前面：最近在学习车载以太网的知识，顺便记录一下知识点。） OSI（Open System Interconnect ）模型是一种网络通信框架，由国际标准化组织（‌ISO）在1985年提出&#xff0…
阅读更多...
day15：shell基础

day15：shell基础

一，编程语法分类（了解） 编程范式： 面向过程：程序通过按步骤执行函数或过程完成任务，强调流程控制和函数调用，适合流程明确的任务，如 C。面向对象：通过“类”和“对象”封…
阅读更多...
无人机测绘遥感技术算法概述！

无人机测绘遥感技术算法概述！

一、数据采集算法 航线规划算法 根据测绘任务需求，利用地理信息系统（GIS）和遥感技术，对无人机进行航线规划。 考虑地形、气候、障碍物等因素，优化飞行路径，确保数据采集的完整性和准确性。 传感器控制算…
阅读更多...
Pytest-Bdd-Playwright 系列教程（6）：在测试步骤函数中设置别名数据共享

Pytest-Bdd-Playwright 系列教程（6）：在测试步骤函数中设置别名数据共享

Pytest-Bdd-Playwright 系列教程（6）：在测试步骤函数中设置别名&数据共享 前言一、步骤别名二、特性文件三、测试脚本四、运行测试五、小测验总结 前言 有的时候，为了提高可读性，我们需要使用不同的名称来声明相同的…
阅读更多...
HTML 分组标签与语义化应用：合理使用 ＜div＞、＜span＞ 和基础语义容器

HTML 分组标签与语义化应用：合理使用 ＜div＞、＜span＞ 和基础语义容器

文章目录 1. `<div>` 标签特点用途示例2. `<span>` 标签特点用途示例3. `<fieldset>` 标签特点用途示例4. `<section>` 标签特点用途示例5. `<article>` 标签特点用途示例总结HTML中的分组（容器）标签用于结构化内容，将页面元素组织成逻辑区域…
阅读更多...
关于武汉芯景科技有限公司的马达驱动芯片AT6237开发指南（兼容DRV8837)

关于武汉芯景科技有限公司的马达驱动芯片AT6237开发指南（兼容DRV8837)

一、芯片引脚介绍 1.芯片引脚 二、系统结构图 三、功能描述 逻辑功能
阅读更多...
Android View

Android View

前面我们了解了Android四大组件的工作流程&#xff0c;Android中还存在一个和四大组件地位相同的概念&#xff1a;View&#xff0c;用于向用户页面展示内容。我们经常使用的TextView、Button、ImageView控件等都继承于它&#xff0c;也会自定义View实现自定义效果。View类源码内…
阅读更多...
谷歌插件开发学习指南

谷歌插件开发学习指南

什么是谷歌插件 谷歌插件&#xff08;Chrome Extension&#xff09;是为谷歌浏览器&#xff08;Chrome&#xff09;开发的小程序&#xff0c;旨在增强浏览器的功能或用户体验。它们可以通过添加工具栏按钮、修改网页内容、集成其他服务等方式&#xff0c;实现各种功能&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023