vue项目中使用Ts+Prettier常见报错

最新推荐文章于 2025-06-14 09:53:49 发布

yixiancheng

最新推荐文章于 2025-06-14 09:53:49 发布

阅读量458

点赞数

CC 4.0 BY-SA版权

文章标签： python java vue react bug

本文链接：https://blog.youkuaiyun.com/yixiancheng/article/details/118781166

本文介绍了如何处理Visual Studio Code（VSCode）中出现的CRLF和LF格式错误。通过修改首选项JSON设置为prettier.endOfLine: crlf可解决Delete`␍'警告。另外，若提示CRLF，可在VSCode底部选择LF并重新格式化文件以消除警告。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一直报错：Delete `··`

解决方法：

ctrl+shift+p
打开首选项json
添加："prettier.endOfLine": "crlf",

报错：warning Delete `␍`

解决方法：

vscode下方有一个CRLF
点击，在弹出窗口选择LF
重新格式化即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yixiancheng

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

记~Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 搭建项目基本框架

小白小白从不日别的博客

06-02

1023

【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】

m0_37873510的博客

01-15

6692

Vue3+Vite+TS目集成ESlint +Prettier实现代码规范检查和代码格式化

参与评论您还未登录，请先登录后发表或查看评论

ts项目识别不了.vue文件报错

weixin_60537353的博客

03-20

2660

在tsconfig.json文件的include配置中,把我们刚新建的vue.d.ts文件加进去就不会再报错了。在项目根目录下新建一个vue.d.ts文件，然后输入以下代码。

vue3项目中prettier+stylelint+husky+Lint-staged+Commitlint配置

我愿化作繁星

05-11

1724

https://www.npmjs.com/package/eslint-import-resolver-typescript 解决@别名识别问题。eslint https://eslint.nodejs.cn/docs/latest/use/getting-started 代码质量检查工具。prettier https://www.prettier.cn/docs/index.html 代码风格格式化工具。: 一款工程性更强，轻量级，高度自定义，标准输出格式的。整合实现生成规范化且高度自定义的。

TypeScript + Prettier：完美搭配的前端开发组合

最新发布

小白菜的博客

06-14

858

本文旨在帮助前端开发者理解TypeScript与Prettier的核心价值，掌握二者的协同使用方法，并通过实战案例展示它们如何共同提升代码质量与团队协作效率。内容覆盖基础概念、配置技巧、常见问题及未来趋势，适合从初级到中级的前端开发者阅读。本文将按照"概念理解→原理分析→实战配置→场景应用"的逻辑展开，先通过生活化案例解释TypeScript与Prettier的作用，再拆解二者的协作原理，最后通过完整的项目实战演示配置过程，并总结实际开发中的常见问题与解决方案。

Vue3+Ts项目建立 editorcongfig配置、prettier配置、ESLint配置、eslint和prettier冲突问题

zhangtw的博客

03-02

3183

文章目录一、创建Vue3项目1、使用vue create命令创建项目二、代码规范2.1 集成editorcongfig配置2.2 使用prettier工具2.3使用ESLint检测一、创建Vue3项目 1、使用vue create命令创建项目 1、# 创建项目 vue create <project name> 2、选择手动创建 3、选择需要的，这主要讲一下怎么配置Linter/Formatter 4、选择3.x 5、使用类样式组件语法选择N 6、我们使用Babel处理选择Y

换行CRLF

studyvcmfc的专栏

12-08

1137

换行，是在计算机领域中，换行（newline）或称为Line break或end-of-line（EOL）字符是一种加在文字最后位置的特殊字符，在换行字符的下一个字符将会出现在下一行，实际上换行字符根据不同的硬件平台或操作系统平台会有不同的编码方式。 [编辑] 表示应用软件以及操作系统对于换行字符的表示方式：以ASCII为基础的或相容的字符集使用分别LF（Line feed, 0A

vite6+vue3+ts+prettier+husky9+lint-staged+eslint9配置前端项目（后台管理系统、移动端H5项目通用配置）

qq_48617322的博客

01-02

3471

很多小伙伴苦于无法搭建一个规范的前端项目，导致后续开发不规范，今天给大家带来一个基于Vite6+TypeScript+Vue3+ESlint9+Prettier的搭建教程。

【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）

aDiaoYa_的博客

01-25

3500

结合了很多项目和文章，总结一篇项目构建的笔记。温馨提示：文章末尾记录了我在搭建项目过程中，遇到的一些问题和解决办法 ~

vue3+vite+ts+eslint+prettier+stylelint+husky+lint-staged+commitlint+commitizen+cz-git

YuShiYue的博客

06-13

1354

vue3+vite前端工程化搭建,可以不搭建，但是一定要了解

vite+ts+vue3项目初始化 -- eslint+prettier代码格式化

weixin_43993776的博客

08-29

1964

【代码】vite+ts+vue3项目初始化。

vue项目引入ts步骤(小结)

10-16

主要介绍了vue项目引入ts步骤(小结),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

eslint git提交不上_在Typescript项目中，如何优雅的使用ESLint和Prettier

weixin_39611174的博客

11-25

524

授权转载自：orthealllight来源：https://github.com/forthealllight/blog/issues/45对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由于性能问题，TypeScript 官方决定全面采用ESLint，甚至把仓库作为测试平台，而 ...

prettier+ts+eslint+vscode配置代码保存自动格式化,自动remove unsed declaration,delete no-unused-imports

tangdou369098655的博客

07-11

3548

准备工作项目至少安装ESLint插件项目里有这些依赖安装vue插件提供vue代码片段、语法支持、代码高亮等，可以格式化html、标准css（有分号、大括号的那种）、标准js（有分号、双引号的那种）、vue文件安装prettier插件 Code formatter 各种代码格式化，只关注格式化，并不具有eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less ·

TS报错大全

热门推荐

Zeng的博客

09-13

1万+

ts报错大全

核心知识点（eslint,prettier 什么是TS以及他的优点）

zhangjialingliga的博客

08-31

171

eslint。

React+Ts配置Eslint+Prettier代码检测与格式化

Unknow_wen的博客

01-04

1781

React+ts配置eslint+prettier代码格式化

想使用wails写一个程序，前端技术站采用vue3+vite+vue-router+pinia+Ant- design-vue+Unocss+Typescript+Sass+ESLint+Prettier，应该如何初始化搭建

02-26

<think>嗯，用户想用Wails来开发一个程序，前端技术栈包括Vue 3、Vite、Vue Router、Pinia、Ant Design Vue、Unocss、TypeScript、Sass、ESLint、Prettier。我需要帮他理清楚初始化的步骤。首先，我应该回忆一下Wails的基本用法。Wails初始化项目的时候可以选择前端模板，比如Vue3。但用户用的Vite，可能需要手动配置，或者Wails现在是否支持Vite了？可能需要先创建一个Wails项目，然后替换前端部分为Vite生成的Vue3项目。接下来，前端部分的技术栈较多，需要逐一安装配置。比如Vue Router和Pinia都是通过npm安装的，Ant Design Vue可能需要按需引入，还有Unocss的设置。TypeScript和Sass应该是在创建项目时就可以选择的，但可能需要检查配置是否正确。然后是整合到Wails中。Wails的前端部分默认放在frontend目录，需要确保Vite的构建输出路径正确，并且Wails的配置文件指向这个目录。可能需要调整vite.config.ts中的build选项，将输出目录设为Wails所需的dist目录。另外，ESLint和Prettier的配置可能需要用户自己初始化，或者使用现有的配置模板。这部分可能需要生成.eslintrc和.prettierrc文件，并安装相关依赖。可能会遇到的问题包括：Vite和Wails的集成是否顺畅，Unocss的配置是否正确，Ant Design Vue的按需加载是否生效，以及TypeScript的类型检查是否报错。需要提醒用户注意这些点，并给出相应的解决方法。用户可能的深层需求是希望快速搭建一个结构清晰、配置完善的Wails+Vue3项目，可能用于生产环境，所以步骤需要详细且准确，避免后续出现配置问题。需要分步骤指导，确保每个依赖和配置都正确安装和设置。</think>以下是使用 Wails 整合 Vue3 + Vite 技术栈的详细搭建步骤： ### 一、环境准备 1. 确保已安装： - Go 1.18+ - Node.js 16+ - Wails CLI: `go install github.com/wailsapp/wails/v2/cmd/wails@latest` ### 二、项目初始化 ```bash wails init -n myproject -t vue cd myproject ``` ### 三、前端配置 1. 清理默认模板： ```bash rm -rf frontend/src/components/* rm frontend/src/App.vue ``` 2. 安装核心依赖： ```bash cd frontend npm install vue@next vue-router@4 pinia ant-design-vue@next npm install -D unocss @unocss/reset vite-plugin-components sass npm install -D eslint@8 prettier eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin ``` 3. 修改 `vite.config.ts`： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import Components from 'vite-plugin-components' import Unocss from 'unocss/vite' export default defineConfig({ plugins: [ vue(), Components({ resolvers: [ (name) => { if (name.startsWith('A')) return { importName: name.slice(1), path: 'ant-design-vue/es' } } ] }), Unocss() ], css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/variables.scss";` } } } }) ``` 4. 创建 UnoCSS 配置文件 `unocss.config.ts`： ```typescript import { defineConfig, presetUno } from 'unocss' export default defineConfig({ presets: [ presetUno() ], shortcuts: { 'page-container': 'p-4 max-w-1200px mx-auto' } }) ``` ### 四、目录结构调整 ``` frontend/ ├─ src/ │ ├─ assets/ │ ├─ layouts/ │ ├─ router/ │ ├─ stores/ │ ├─ views/ │ ├─ styles/ │ │ └─ variables.scss │ ├─ App.vue │ └─ main.ts ``` ### 五、核心代码示例 1. `main.ts` 初始化： ```typescript import { createApp } from 'vue' import { createPinia } from 'pinia' import Antd from 'ant-design-vue' import router from './router' import App from './App.vue' import 'ant-design-vue/dist/reset.css' import '@unocss/reset/tailwind.css' import 'uno.css' const app = createApp(App) app.use(createPinia()) app.use(router) app.use(Antd) app.mount('#app') ``` 2. Pinia Store 示例 (`stores/counter.ts`)： ```typescript import { defineStore } from 'pinia' export const useCounter = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } }) ``` ### 六、Wails 配置调整修改 `wails.json`： ```json { "name": "myproject", "frontend:build": "npm run build", "frontend:install": "npm install", "frontend:dev": "vite --port 34115", "frontend:dev:watcher": "vite build --watch" } ``` ### 七、开发命令 ```bash # 启动开发模式 wails dev # 生产构建 wails build ``` ### 常见问题处理： 1. 样式加载问题：确保在 `main.ts` 中正确导入 CSS 文件 2. 按需加载优化：使用 `vite-plugin-components` 自动导入 Ant Design 组件 3. 跨平台兼容：通过 UnoCSS 的 safelist 配置关键样式 4. 类型检查：配置 `tsconfig.json` 中的 paths 别名 5. 代码规范：添加 `.eslintrc` 和 `.prettierrc` 配置文件建议通过 Wails 的桥接功能实现前后端通信，使用 `@wailsjs/runtime` 处理原生能力调用。可通过 `wails dev -debug` 进行调试。