vite 创建vue3项目 集成 ESLint、Prettier、Sass等

已于 2024-09-11 10:57:24 修改
阅读量523 收藏 5
点赞数 11
分类专栏： 前端 文章标签： vue.js 前端 vite
于 2024-06-27 14:18:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yuanben_wuxin/article/details/140012126
版权

在网上找了一大堆vue3脚手架的东西，无非就是vite或者vue-cli,在vue2时代，vue-cli用的人挺多的，也很好用，然而vue3大多是和vite搭配搭建的，而且个人感觉vite这个脚手架并没有那么的好用，搭建项目时只能做两个选择，一是选择框架是vue还是其它，二是选择js还是ts，选择完就完事儿了

npm create vite@latest

然后我就怀疑是不是我的姿势不对，在vite官网上翻找一通之后找到了两个解决方案

一是选择variant的时候不要选择Typescript，直接选择下面那个Customize with creat-vue,这样就会有一个指引，一步步指导创建项目

然后第二种方案是这个（传送门）

使用方法也比较简单，和直接使用vite差不多

  npx create-vite-template@latest

然后跟着指引一步步选择就行，还是比较方便的

猿儿本无心
关注
专栏目录
记~Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 搭建项目基本框架
小白小白从不日别的博客
06-02 257
在style下创建scss相关的文件如下图主要看index.less里面的内容// 存放项目统一规范的变量// 自定义的 css 样式// 自定义主题样式// 修改 element-ui 样式修改入门的文件main.ts到这里一个基本的 基于 Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 的项目框架就搭建完成了。
vscode + vite + vue3 + ts + eslint + stylelint 代码自动格式化
Ajekseg的博客
02-23 1051
使用 vite 创建的 vue3 项目有点简陋，很多功能都没有。所以本文将讲解一下如何对 vite + vue3 项目配置代码自动格式化。配置完成后的效果如下图所示： 安装 VSCode 插件 打开 VSCode，安装以下插件： eslint stylelint volar 打开 VSCode 配置文件（Maccommand + shift + p，windowsctrl + shift + p，输入settings）。 在配置文件中加入以下代码： "editor.codeActionsOnSave.
vue3-vite-eslint-prettier-template:vue3 vite eslint漂亮的模板
03-06
vue3-vite-eslint-prettier-template:vue3 vite eslint漂亮的模板
vue3+Vite+TS项目，配置ESlint和Prettier
iblackboy的博客
03-25 7911
是一个用于检测 ECMAScript/JavaScript 代码中的潜在问题和错误的工具，旨在使代码更一致并避免错误。它可以帮助开发者检测代码中的潜在问题，提高代码质量。一个“有态度”的代码格式化工具支持大量编程语言已集成到大多数编辑器中几乎不需要设置参数为什么使用Prettier?按保存键时，代码就被格式化了代码评审时无须争论代码样式节省时间和精力ESLint配置文件（需求不同，会有一些差异）env: {},extends: [],env: {},},},
Vue3+TypeScript 项目中，配置 ESLint 和 Prettier
最新发布
on1yLX的博客
08-09 1082
typescript-eslint/eslint-plugin：插件，包含一系列TypeScript的ESint规则。eslint-plugin-vue：仅支持vue，提供的规则可以支持 .vue\js\jsx\ts\tsx 文件校验。执行命令，yarn lint-fix，项目按照eslint-prettier规则进行代码格式化。eslint-config-prettier：解决eslint和prettier冲突。eslint-config-prettier：将prettier作为eslint规则。
vue3 中引入eslint
qq_45188807的博客
06-17 668
fix”: “eslint src --fix”//输入命令eslint自动修复。“lint”: “eslint src”,//输入命令eslint检查。npx eslint --init初始化后，在vite.config.ts中。//package.json中。文件配置参考中文官网。
vue3项目配置eslint，让项目开发更加规范和统一。
2301_78152384的博客
03-16 1034
4.下载ESlint，EditorConfig for VS Code，ESLint Chinese Rules，eslint-disable-snippets，Prettier ESLint插件。5.查看设置中的settings配置文件，在保存时自动进行eslint效验。2添加文件.eslintrc.cjs，eslint中的配置。3.如果需要代码调试，在pageage.json中编辑。1.下载eslint包。
vue3项目之配置 Eslint
m0_63907100的博客
02-21 639
配置 Eslint
Vue3 + TypeScript + Vite 初始项目搭建（ESLint、Prettier、Sass
tencentes的博客
04-17 846
为了使在使用 ESLint 进行代码检查时，遇到使用别名 import 模块时，不报错，使 ESLint 能够支持别名配置，所以在 ESLint 配置文件中 import/resolver 的 alias 选项，配置如何解析 import 语句中的别名，依赖 eslint-import-resolver-alias 和 eslint-plugin-import 插件。
Vue3 + TypeScript + Vite 初始项目搭建（ESLint、Prettier、Sass(1)
2401_84446825的博客
04-29 696
/ 可选值参考：https://www.tslang.cn/docs/handbook/compiler-options.html。// vue 官方提供的 ESLint 插件 eslint-plugin-vue 中提供了 parser 和 rules，// parser 为 vue-eslint-parser，配置使用写在上面的 parser 字段，// 配置使用插件时，插件名称的前缀 eslint-plugin-, 可省略。// parser 的作用是将我们写的代码转换为 ESTree（AST）
配置vue3+vite+eslint+prettierrc项目
weixin_54000091的博客
12-06 1436
以上步骤适用于所有的vue3项目，因为仅仅上续功能仅仅是编译时检测而非运行时检测所以用任何打包工具编译项目运行都是没问题的。
Eslint:vue3项目添加eslint(standard规则)
weixin_43239880的博客
04-23 5162
1.可以看到我们自己新建的vite项目来自己添加standard规则会有各种的bug，虽然这种bug在eslint的官网都能解决，但是还是很费神的，关键还是在于eslint和vite融合的不够完美（也怪更新的太快了），不能直接初始化好了就可以用（像vue2一样）。所以总结下来的话，我认为还是在刚建立项目的时候就去添加eslint，然后使用自定义的规则来做,参考我的上一篇文章。2.另外的话，此时用npx eslint --init的方式只能添加standard规则和xo规则，并没有airbnb规则。
vue3 添加eslint校验（eslint-plugin-vue）
热门推荐
James_liPeng的博客
12-10 1万+
vue3的eslint校验
vue3.0常用eslint配置详解 .eslintrc.js
关注最新技术问题并持续维护更新
10-28 7259
规则值 " off " 或者 0，关闭 " warn " 或者 1，警告 " error " 或者 2，报错 .eslintrc.js配置 module.exports = { root: true, // 此项是用来告诉eslint找当前配置文件不能往父级查找 env: { // 预定义的全局变量，这里是浏览器环境 amd: true, es6: true, commonjs: true, node: true, jquery: true, br
【VUE】vue-cli3配置eslint
qq_35724512的博客
01-14 208
https://www.cnblogs.com/superlizhao/p/10956054.html
Vue3最佳实践 第八章 ESLint 与 测试 ( ESLint )
zhtbs的博客
10-18 1783
​在所有的JavaScript 项目开发中我们都会接触到 ESLint 这个词，ESLint 是个什么样的组件会给为项目做些什么吗？ESLint 是一种检查语法错误以及代码是否按照预定规则编写的工具。ESLint 可以帮助开发者发现代码中潜在的错误。在Vue项目中Eslint一般都会配合其他语法检测工具一起使用，最经典的组合是Eslint+ Prettier。​Eslint 和 Prettier 并不局限于 Vue.js，而是掌握 JavaScript 的必备知识，所以推荐给不懂 ESLint 的同学。
工程化-vue3+ts：代码检测工具 ESLint
snowball的博客
07-07 1521
插件支持：ESLint 提供了丰富的插件生态系统，可以通过安装插件来扩展 ESLint 的功能，比如支持新的 JavaScript 语法特性、集成其他语言（如 TypeScript、JSX 等）的检查、添加自定义规则等。ESLint 是一个功能强大的 JavaScript 代码检查工具，它可以帮助开发人员在编码过程中发现潜在的错误和不符合代码风格规范的问题。通过使用 ESLint，开发团队可以确保代码质量的一致性，减少因编码风格不一致而导致的合并冲突和审查延迟，同时提高代码的可读性和可维护性。
vue3项目 - Eslint 配置代码风格（保存格式化）
qq_38210427的博客
05-10 2425
vue3项目 - Eslint 配置代码风格_eslint配置模板-CSDN博客
vue-cli3项目配置自动eslint代码格式化校验
biraotian的博客
02-25 2522
vue-cli3项目配置自动eslint代码格式化校验 为了使得代码更加规范以及更易读，需要规范前端团队成员的eslint和vscode setting，现在记录下我们需要做的具体方法。 安装依赖 在cmd中打上把相应的依赖加到devDependencies下，再npm install对应依赖。 在package.json文件加上相应依赖： "eslint-plugin-html": "^6.0.3", "@vue/cli-plugin-eslint": "^3.3.0", "@vue/eslint-con
vite创建vue3项目配置eslint
09-29
vite创建Vue3项目配置ESLint可以通过以下步骤完成： 1. 首先，在使用vite创建Vue3项目时，会有一个选择：Use ESLint to lint your code? (Y/n)，请在这一步选择Y来启用ESLint。 2. 完成项目创建后，你可以在项目根目录下找到一个名为`.eslintrc.js`的文件。这个文件是ESLint的配置文件，你可以在这里进行相关配置。 3. 打开`.eslintrc.js`文件，你可以配置一些基本的规则，例如检查的语法、代码风格等。你可以根据自己的需求进行相应的配置。 4. 另外，你还可以根据需要安装和配置一些ESLint的插件和扩展，以进一步增强代码校验的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值