前端项目代码风格及校验统一格式化配置

1.eslint配置

项目中安装eslint:

npm

npm init @eslint/config

或者

npx eslint --init

使用 yarn 时,需要先安装 eslint 插件才可以执行命令

yarn add eslint -D
yarn eslint --init

pnpm

pnpm eslint --init

通过 vite 创建项目自带生成 eslintrc文件,npm 则需要手动在项目创建配置文件.eslintrc文件;

文件配置语法解析:

javascript 复制代码
module.exports = {
parser: {}, // 解析器
extends: [], // 继承的规则 [扩展]
plugins: [], // 插件
rules: {} // 规则
};

默认配置(带 TS):

javascript 复制代码
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
],
overrides: [],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
},
plugins: ["react", "@typescript-eslint"],
/*
* "off" 或 0 ==> 关闭规则
* "warn" 或 1 ==> 打开的规则作为警告(不影响代码执行)
* "error" 或 2 ==> 规则作为一个错误(代码不能执行,界面报错)
*/
rules: {
'react/react-in-jsx-scope': 'off',
'no-console': 'error', // 禁止使用console
'no-unused-vars': 'error',// 禁止定义未使用的变量
'no-debugger': 'error', // 禁止使用debugger
'no-var': 'error', // 要求使用 let 或 const 而不是 var
},
};

注意:Prettier 和 ESLint 的冲突问题:
如果项目出现规则冲突以后,需要安装以下插件解决冲突,如果未出现冲突,则可以忽略。

安装插件:

npm install eslint-plugin-prettier eslint-config-prettier -D

  • eslint-config-prettier 的作用是关闭eslint中与prettier相互冲突的规则。
  • eslint-plugin-prettier 的作用是赋予eslint用prettier格式化代码的能力。

安装依赖并修改 .eslintrc 文件
prettier 添加到 extends 的最后
"extends":[ ..., "plugin:prettier/recommended" ]

2.Prettier 配置

安装配置流程:

  1. 安装 prettier 插件和 vscode扩展 Prettier - Code formatter;
  2. 在项目根目录新建一个文件夹.vscode,在改目录下建settings.json 文件
javascript 复制代码
{
  // 保存文件自动格式化
  "editor.formatOnSave": true,
  // prettier 风格
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 开启 stylelint 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

项目根目录创建.prettierrc.cjs文件,配置:

javascript 复制代码
module.exports = {
  // 最大列数
  printWidth: 120,
  useTabs: false,
  // 缩进
  tabWidth: 2,
  // 结尾用分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // jsx 中使用单引号
  jsxSingleQuote: true,
  // 箭头函数单个参数 去掉括号
  arrowParens: 'avoid',
  // 对象括、数组、括号文字间添加空格
  bracketSpacing: true,
  // 尾随逗号
  trailingComma: 'none'
};

3. EditorConfig 配置

项目根目录下创建.editorconfig 文件,配置:

javascript 复制代码
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

配置解读:

javascript 复制代码
root=true 对所有文件生效
end_of_line= lf不同操作系统换行符不同
end_of_line
lf | cr | crlf (大小写不限)
复制代码
end_of_line设置的换行符的表示方式。先看一下这几个值是什么意思
lf:全拼Line Feed,意思是换行,用符号 \n 表示
cr: 全拼Carriage Return, 意思是回车, 用符号 \r 表示
crlf:cr 和 lf的结合,回车换行,用符号 \r\n
insert_final_newline = true 代码最后新增一行
trim_trailing_whitespace = true 修剪尾随空格

通过在项目中配置这三个配置文件,可以校验代码语法、提高项目代码规范、风格统一。

tips: 主要支持 vscode 玩家,webstorm 玩家自行探索配置吧~~~~

相关推荐
haaaaaaarry36 分钟前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js
qingyingWin1 小时前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
不懂英语的程序猿1 小时前
【JEECG】JVxeTable表格拖拽排序功能
前端·后端
拾光拾趣录1 小时前
前端灵魂拷问:从URL到Redux,17个常见问题
前端·面试
萌萌哒草头将军1 小时前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong2 小时前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字2 小时前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
程序视点2 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木3 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
脑袋大大的3 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts