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"
相关推荐
一只叫煤球的猫6 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel7 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼7 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手11 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法11 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku11 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode11 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu11 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu11 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu11 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript