vite搭建React+ts+eslint+prettier_react vite打包引入eslit 和pretter

一、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"