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

最新推荐文章于 2024-05-11 10:23:54 发布

原创最新推荐文章于 2024-05-11 10:23:54 发布 · 472 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#python #java #vue #react #bug

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

一直报错：Delete `··`

解决方法：

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

报错：warning Delete `␍`

解决方法：

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yixiancheng

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

weixin_43993776的博客

08-29

2194

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

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

weixin_60537353的博客

03-20

2810

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

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

warning Delete `··` prettier/prettier

appcanLiYunLong的博客

02-12

3269

npm run lint – --fix

换行CRLF

studyvcmfc的专栏

12-08

1192

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

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

我愿化作繁星

05-11

1901

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 代码风格格式化工具。: 一款工程性更强，轻量级，高度自定义，标准输出格式的。整合实现生成规范化且高度自定义的。

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

zhangtw的博客

03-02

3240

文章目录一、创建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

Vue 之编译之处理 warning Delete `␍` prettier/prettier

仙魁XAN

05-06

1万+

Vue 之编译之处理 warning Delete `␍` prettier/prettier 一、简单介绍 Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，Vue 编译的出现Delete `␍` prettier/prettier 问题的简单处理，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。二、Delete `␍` prettier/prettier 现象三、原因分析 1、可能原因可能是 eslint 配置后运行项目.

error Delete `␍` prettier/prettier【多种方法】

qq_22841387的博客

03-08

1万+

通过本文的方法，您可以有效解决项目中由于CRLF与LF差异导致的格式问题。无论是手动调整文件格式还是通过ESLint规则进行全局控制，选择适合自己项目和团队的方式都可以极大提高开发效率。如果您对ESLint和代码格式化有更多的需求，建议进一步了解相关工具的文档与配置方法。ESLint 官方文档Git 与 CRLF。

vue-cli创建项目运行时prettier报错最全解决办法

IreneChenLovePy的博客

05-20

3459

windows系统新手使用vue-cli创建项目时，可能会遇到的问题

Vue 编译错误 warning Delete `␍` prettier/prettier

oneyJiang

07-08

2842

解决 Vue 编译错误 warning Delete `␍` prettier/prettier

windows 下代码换行符问题、windows下如何将代码全部从CRLF变成LF

止水聊技术

07-05

7896

默认的换行符在各操作系统下是不一致的，Windows 是 CRLF（’\r\n’），Mac、Linux是 LF（’\n’）。在一些项目中，会严格限制换行符，比如在项目根目录下 .editorconfig 中设置 end_of_line = lf，当你在 Mac 下开发之后，在 Windows 上 clone 代码时， git 会自动将换行变更为系统默认的换行（’\r\n’），而且还是项目级别的。...

TS报错大全

Zeng的博客

09-13

1万+

ts报错大全

vue3/4填坑（解决报错：Compiled with 1 warnings：warning Delete `⏎····` prettier/pret (0 errors, 2 warnings）

beLaity的博客

09-08

1万+

在我们初学vue3.0，修改vue-cli生成的HellowWorld.vue文件时就会出现这种报错（很容易才到这个坑） Compiled with 1 warnings：Module Warning (from ./node_modules/eslint-loader/index.js): warning Delete ⏎···· prettier/prettier warning Insert · prettier/prettier 解决办法：在项目的根目录打开控制台，输入以下命令，

warning delete ·· (prettier/prettier)

weixin_33830216的博客

02-25

1万+

为什么80%的码农都做不了架构师？>>> ...

使用eslint时总是提醒warning Delete `·` prettier/prettier或者405:15 warning Insert `⏎·····` prettier

Sunny_lxm的博客

06-02

2万+

解决方法可执行代码： npm run lint --fix

warning Delete `␍` prettier/prettier（eslint配置的一些问题）

最新发布

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` 进行调试。