目录
一、构建项目
二、安装eslint和prettier的依赖
三、修改.eslintrc.cjs,创建.prettierrc.cjs
1、.eslintrc.cjs文件配置
2、.prettierrc.cjs文件配置
三、将错误显示在页面上
1、安装vite-plugin-eslint插件
2、vite.config.ts文件配置
本文将介绍vite作为脚手架构建react开发项目，使用eslint进行代码规范，prettier进行代码美化。花话不多说，直接上代码。
一、构建项目
pnpm create vite
二、安装eslint和prettier的依赖
在vite脚手架当中已经内置了eslint依赖包，也就是在项目创建完成后已经有了eslint以及eslint相关的依赖，因此只需要安装prettier和prettier相关的依赖包即可。
pnpm add prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-html -D
三、修改.eslintrc.cjs,创建.prettierrc.cjs
1、.eslintrc.cjs文件配置
module.exports = {
env: { browser: true, es2020: true, node: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
'plugin:prettier/recommended',
'plugin:react/jsx-runtime'
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 'latest',
sourceType: 'module'
},
settings: {
react: {
version: 'detect'
},
'html/html-extensions': ['.html', '.we'] // consider .html and .we files as HTML
},
plugins: ['react-refresh', 'react', '@typescript-eslint', 'prettier', 'html'],
rules: {
'react-refresh/only-export-components': 'warn',
'prettier/prettier': 'error',
'arrow-body-style': 'off',
'prefer-arrow-callback': 'off'
}
};
2、.prettierrc.cjs文件配置
module.exports = {
semi: true,
endOfLine: 'auto',
singleQuote: true,
trailingComma: 'none',
bracketSpacing: true,
jsxBracketSameLine: false,
vueIndentScriptAndStyle: false,
'jsxBracketSameLine:': true,
htmlWhitespaceSensitivity: 'ignore',
wrapAttributes: true,
overrides: [
{
files: '*.html',
options: {
parser: 'html'
}
}
]
};
三、将错误显示在页面上
如果希望在开发的过程中将代码中的错误或者不规范的地方反应在页面上，可以使用vite-plugin-eslint来完成
1、安装vite-plugin-eslint插件
pnpm add vite-plugin-eslint -D
2、vite.config.ts文件配置
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import viteEslint from 'vite-plugin-eslint';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
console.log('
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
