https://www.npmjs.com/package/lint-staged
webstorm设置搜eslintr、eslint、stylelint,如果没有,搜plugin,安装prettier、eslint、stylelint
https://juejin.cn/post/6947872709208457253
husky是一个Git Hook,可以帮助我们对commit前,push前以及commit提交的信息进行验证,现在我们就来安装并配置一下这个工具,首先通过自动配置命令安装,命令如下:
大家好,我是HoMeTown,最近在搭建一个公司与某一线大厂有合作,需要做一个性能极其优化的微信小程序,我们组正好刚从企微项目里抽出身来,所以这个艰巨的任务就交给我们来完成了,首先开了一天会,跟合作方的前端经理PM 确定好了技术选型以及规范,分工细则下来以后,得到项目架构&少许业务开发的任务,优化交给合作方去做,因此这个项目会有很多人参与进来,一个强有力的项目约束是十分重要的!
上图标红就是相关的工程化配置,有 Linter、Tests,Github Actions 等,覆盖开发、测试、发布的整个流程。
大家在做前端开发的时候,为了保证团队成员提交代码的质量,一般都会对代码进行代码质量检查和代码美化工作,通常的做法是进行一系列的配置,借助于 eslint、prettier、lint-staged、husky 等工具实现代码的检测工作。但是这个过程涉及众多,配置起来也很繁琐,而且针对不同的项目都需要进行重复配置,无疑增加了大家的工作量,那么我要解决的就是这个问题,提供一个命令行工具来封装上述检测工具,简化配置步骤。
在真实的工程项目中,尤其是多人协作的场景下,代码规范就变得非常重要了,它可以用来统一团队代码风格,避免不同风格的代码混杂到一起难以阅读,有效提高代码质量,甚至可以将一些语法错误在开发阶段提前规避掉。但仅有规范本身不够,我们需要自动化的工具(即Lint 工具)来保证规范的落地,把代码规范检查(包括自动修复)这件事情交给机器完成,开发者只需要专注应用逻辑本身。
讲代码规范的文章很多,但是很可惜没有一篇文章能讲好讲全,其他文章没完成的工作,就让这篇文章来完成吧。
首先跑到 D:\NodeJS\node_global 里面把之前全局安装的 ESlint 的包全部给删除掉.
npx create-react-app react-standard-f –template typescript
基于最新的一些库来规范项目, 比如格式化和提交预处理等~ 一些库的最新版的配置更加独立了, 对于工程化来说,其实更加直观了~ 围绕react技术栈加入相关门禁来开展文章~
假如团队中的小伙伴在提交代码时没有遵循规范要求,例如只写了一个"修改"或"更新,这会给团队中其他小伙伴造成困扰呢,不得不花时间查看代码和推测逻辑。
NPM npm init @vitejs/app Yarn yarn create @vitejs/app 项目构建(Ts版) npm 6.x npm init @vitejs/app vue-admin-pro --template vue-ts npm 7+, 需要额外的双横线: npm init @vitejs/app vue-admin-pro -- --template vue-ts yarn yarn create @vitejs/app vue-admin-pro --template
Eslint 可以静态检查 javascript 代码一些逻辑上的错误,还有一些代码格式的错误。原理是把代码 parse 成 AST,然后基于 AST 来检查一些问题。
一个项目如果涉及到多人协作,由于每个人代码的书写习惯和风格不太一样,如果没有统一的规范,那就会很乱,这对代码的可维护性大大降低。
大部分前端项目都配置Stylelint、Eslint、Tslint和Prettier四大前端代码校验工具。「代码校验工具」以下简称Lint,为了解决代码不严谨,通过预设规则校验代码,检测其是否存在错误/漏洞,并对错误/漏洞提示修复方案并尽可能依据修复方案格式化出正确代码。该功能称为「格式化代码」,基本上所有编辑器都需配置该功能。
◆ 一、开源项目简介 Geeker Admin,基于 Vue3.2、TypeScript、Vite2、Pinia、Element-Plus 开源的一套后台管理框架。 ◆ 二、开源协议 使用0BSD开源协议 ◆ 三、界面展示 项目截图 1、登录页: 2、首页: 3、表格页: 4、数据大屏: ◆ 四、功能概述 项目功能 使用 Vue3.2 开发,单文件组件 <script setup> 采用 Vite2 作为项目开发、打包工具(配置了 Gzip 打包、TSX 语法、跨域代理、打包预览工具……)
对于 Lint 配置的不了解导致项目中总是会莫名其妙的提示报错,这应该是大多数同学面临的窘境。
Vue3 跟 Vite 正式版发布有很长一段时间了,生态圈也渐渐丰富起来,作者已在多个项目中使用,总结一下:就是快!也不用担心稳定性问题,开发体验真不是一般好!还没尝试的同学可以从本文开始学习,从 0 开始手把手带你搭建一套基于 Vite + Vue3 + TypeScript 规范的前端工程化项目环境。
Vite (法语意为 "快速的",发音 /vit/) 是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端的开发体验。除了Vite外,前端著名的构建工具还有Webpack和Gulp。目前,Vite已经发布了Vite2,Vite全新的插件架构、丝滑的开发体验,可以和Vue3的完美结合。
Vite已经出来很久了,新版本也比较稳定,有没有打算入手一下,推荐下面这篇文章。
系列常规操作,没兴趣的可以跳过这篇水文. 写过Angular 2+的小伙伴会有一种天然的熟悉感. 因为Nest基本就是同一个思想模式搞得~~
本文出自于掘金的子弈[1],原文链接 从零开始配置 TypeScript 项目[2]。
昨日本该更新文章,是围绕前后端模块的(因为前两天是按计划写linux以及网络模块)。但昨日实在没想出要写什么文章, 心态处在一个尴尬的境地,简单的知识点觉得没必要搬运,但是深入的东西不是花个一天半天就能写的出来,况且现在也有不少朋友关注我,写文章得认真对待,左思右想干脆就没写了。
首先就是需要设计并搭建项目的文件结构,并初始化一个 package.json 文件,用于描述当前项目的功能。
大家好,我是前端西瓜哥。今天我们学习使用 husky 工具,在 commit 的时候做一些风格的校验工作,包括 commit 信息格式化和文件格式化。
因为我们的组件库要发布到npm上面,所以你的组件库名称不能和其他npm包的名称重复。
由于一些客观原因,多个项目多套eslint配置需要放到同一个Git仓库,那么如何配置pre-commit的eslint校验才能保证对多个文件夹进行校验?
说明: 这里使用脚手架安装项目的时候遇到了一个问题,大致可能说的是 node 版本不匹配,也就是我的版本低了,截图如下。
来源 | https://zhuqingguang.github.io/2020/11/07/nodejs-cli-with-typescript/
本文记录了搭建基于 TypeScript 的 Nodejs 命令行开发环境的全过程。
当前,前端项目支持代码规范校验、代码格式化已经必不可少,同时需要支持代码提交前对代码格式校验预检查,这里提供一份最简单的配置供大家参考。
TS语言,也就是TypeScript,是前端一个非常强大的语言超集,基于JavaScript。
笔者使用了 webpack5 将项目进行了重构,并全程使用的 webpack-chain 来配置 webpack,每个功能也都是独立文件,可单独使用。因此该项目的配置可以在任何项目中被使用。此项目可实战亦可当成 webpack 手册来学习。我开发这个项目的目的就是无论你是新手还是有经验的大佬都可以从中有所收获。此项目为想学 webpack 的同学提供了很好的实战平台,每一个 插件 每一个 loader 都会有详细的讲解及使用背景。
本文虽然使用 Vite 创建了一个 Vue3 + TS 的项目,但其实文中涉及的内容和技术栈并没有关系,主要是结合 ESLint ,Husky,等第三方库实现比较规范的现代化前端工程,可应用于任何技术栈的项目中
我们在前面的四篇中介绍了husky、commitlint、lint-staged、prettier这些工具,可以完成以最小的代价在Git提交到远程仓库前,格式化为统一风格的代码,eslint大家都很熟悉这里就不列举了。下面举一个配置。
规范比业务开发搬砖更为重要,没有一个好的编码规范,维护老的代码或者是编写新的代码都非常痛苦
Prettier是一个支持多语言的代码格式工具,如常用的:js、jsx、Vue、Flow、Ts、HTML、CSS等,非常全面,将代码解析为AST,然后重新组装,目的是最终输出风格统一的代码,对比eslint对error的fix要强一些,如最大长度的改动,eslint只是对有问题的地方进行格式化修改,不改动源代码风格,而prettier是对全量的代码进行格式化。
在上一节中,我们看到了构建 React 应用程序时的所有挑战以及一些可以帮助我们处理这些挑战的很好的解决方案。在这一节中,我们将查看项目结构和初始化工具,这些工具构成了我们项目的良好基础。
1. 初始化项目 在一个合适的地方创建项目文件夹,为了演示,本次的项目名为 demo-cli,然后执行以下命令初始化项目: npm init 执行以上命令之后,会先配置一些 package.json 的基础信息,按提示输入即可: 1.1 配置 package.json 为了方便,我们把项目从 vscode 中打开,然后对 package.json 进行详细配置,篇幅有限,这里仅介绍其中比较重要的部分: 推荐阅读:package.json 详细配置。 1.1.1 name 项目名,同时也是发包的时候别人引入
依赖 yarn init yarn add --dev babel-eslint@10.0.3 yarn add --dev eslint@6.7.1 yarn add --dev eslint-config-alloy@3.7.1 yarn add --dev eslint-config-prettier@6.10.0 yarn add --dev eslint-plugin-prettier@3.1.4 yarn add --dev prettier@2.0.5 yarn add --dev prett
就从我的题目说起,本篇文章告诉你针对定制代码规范和检查这个小需求如何做出亮点?看完本文后回顾上面提到的 4 点,感觉下。
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
以及其他无数个争论不休的问题。这些问题困扰了广大程序员不知道多久,让多少个程序员吵得不可开交、头破血流。
之前翻译过一篇 前端工程化发展历史 的文章,Webpack、Babel 、Eslint 现在基本上就是前端项目的标配了。
继承和重写是面向对象编程语言中的概念,是指一个类扩展自父类,并且重新实现了其中一些属性、方法。这种思想不只是在编程语言中会用到,在配置文件中也有广泛的应用。
领取专属 10元无门槛券
手把手带您无忧上云