一套非常标准的前端代码工作流,附超全教程文档

本文详述了一套标准的前端代码工作流,包括ESLint配置、Prettier使用、.editorconfig设置以及VSCode集成。介绍了如何通过husky和lint-staged在git提交前检查代码规范,确保代码质量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

‘plugin:@typescript-eslint/recommended’,

],

parser: ‘@typescript-eslint/parser’, // 解析器,本解析器支持Ts

parserOptions: {

// 解析器配置选项

ecmaVersion: 12, // 指定es版本

sourceType: ‘module’, // 代码支持es6,使用module

},

plugins: [

// 插件

‘@typescript-eslint’,

],

rules: {

// 规则

},

};

`

配置项

  • parser - 解析器

  • parserOptions - 解析器选项

  • env 和 globals - 环境和全局变量

  • rules - 规则

    • off或0,关闭规则
  • warn或1,开启规则

  • error或2,开启规则,并会出错阻止代码运行

  • plugins - 插件

  • extends - 拓展

配置优先级

规则是使用离要检测的文件最近的 .eslintrc文件作为最高优先级。

  1. 行内配置

  2. 命令行选项

  3. 项目级配置

  4. IDE环境配置

Prettier


Prettier 是一个代码格式化的工具。

安装使用

`npm install --save-dev --save-exact prettier

// 格式化所有文件,npx命令是使用当前项目下的prettier

npx prettier --write .

`

配置文件

Prettier 支持 .prettierrc 为名称,以 .yaml .yml .json .js 为后缀的的配置文件,当然你也可以使用 package.json 文件中的 Prettier 属性来配置。

`module.exports = {

printWidth: 80, //一行的字符数,如果超过会进行换行,默认为80

tabWidth: 2, //一个tab代表几个空格数,默认为80

useTabs: false, //是否使用tab进行缩进,默认为fa

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值