vite搭建React+ts+eslint+prettier

一、vite搭建ts模板

复制代码
npm create vite@latest 项目名 -- --template react-ts

//进入到项目文件夹
npm i

npm run dev

初始化完成后已经配置好eslint

src下一般只留下

初始化git仓库(可选)

复制代码
git init .

二、配置prettier

复制代码
npm i prettier eslint-config-prettier eslint-plugin-prettier -D

项目根目录新建.prettierrc文件:

复制代码
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}
  • useTabs:使用tab缩进还是空格缩进,选择false;
  • tabWidth:tab是空格的情况下,是几个空格,选择2个;
  • printWidth:当行字符的长度,推荐80,也有人喜欢100或者120;
  • singleQuote:使用单引号还是双引号,选择true,使用单引号;
  • trailingComma:在多行输入的尾逗号是否添加,设置为 none
  • semi:语句末尾是否要加分号,默认值true,选择false表示不加;

项目根目录新建.prettierignore文件,忽略掉不需要格式化的文件夹或文件

复制代码
/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

package.json文件的scripts里写一个脚本:

复制代码
"prettier": "prettier --write ."

三、eslint修改配置

根目录.eslintrc或者.eslintrc.cjs中

extends中加入

复制代码
extends: [
    'plugin:prettier/recommended',
  ],

ignorePatterns中加入:

复制代码
"ignorePatterns": ["node_modules/", "*.js", "*.html"]

rule中加入

复制代码
"prettier/prettier": "error"
相关推荐
哎呦你好1 分钟前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
盛夏绽放11 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao27 分钟前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo27 分钟前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er33 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年36 分钟前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er40 分钟前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
CH_Qing41 分钟前
【udev】关于/dev 设备节点的生成 &udev
linux·前端·网络
小诸葛的博客1 小时前
gin如何返回html
前端·html·gin
islandzzzz1 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html