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"
相关推荐
脑袋大大的41 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君011 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie2 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20152 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦3 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆3 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui