阅读完这篇文章，你可以收获： 能够自己亲手写出一套 ESLint 配置； 会知道业界都有哪些著名的 JS 代码规范，熟读它们可以让你写出更规范的代码； vue-cli 在初始化一个包含代码校验的项目时都做了什么...如果需要检查 Vue 中的 template 或者 React 中的 jsx，就束手无策了。所以引入插件的目的就是为了增强 ESLint 的检查能力和范围。...: true, //（默认值）在括号和对象的文字之间加上一个空格 jsxBracketSameLine: true, // 把 > 符号放在多行的 JSX...元素的最后一行 arrowParens: 'avoid', // 当箭头函数中只有一个参数的时候可以忽略括弧 vueIndentScriptAndStyle:...，这个扩展不仅可以关闭和 ESLint 内置规则的冲突，还可以关闭实际项目中引用到的扩展规则的冲突，比如和 Vue、React、TypeScript、Flow 的冲突。
而第一种和第三种都可以实现，但是更推荐使用第三种 editor.codeActionsOnSave，它支持更高的可配置性。...但是看懂每条规则的意义，对于我们也是很重要的，例如你想自己新建工程。 接下来，我将从 普遍用法、Vue项目特殊配置、React项目特殊配置 来看下如何配置 .eslintrc.js 文件。...但即使如此，针对 JSX 和 Hooks 的使用规则，我们仍然需要做一些事情 针对 React Hooks lint 规则具体强制了哪些内容？...'], } 针对 JSX JSX 不过只是 React 的一个语法糖，其最终都会被 React 调用 React.createElement 编译成 React Element 形式。...其中，第四步也是必须的，我们需要做如下配置： // 防止编辑器内置的 [css] [less] [scss] 校验和此扩展 [stylelint] 报告相同的错误 "css.validate": false
就像大多数 IDE 一样，VSCode 也有一个扩展和主题市场，包含了数以千计质量不同的插件。为了帮助大家挑选出值得下载的插件，我们针对性的收集了一些实用、有趣的插件与大家分享。...同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。 9.TODO Highlight 这个插件能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。...14.Language and Framework Packs VSCode 默认支持大量的主流编程语言，但如果你所使用的编程语言不包括在内，也可以通过下载扩展包来自动添加。...同时，你还可以添加一些像 React Native 与 Vue 的相关 Web 开发插件包。 15.Themes 当然，在众多的实用插件中，岂能少了漂亮的主题呢？...你每天都会与你的 VSCode 编辑器进行“亲密的接触”，为何不把它打扮得更漂亮些呢？
Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。...可以说是程序员的小情人都不为过。 对于情人，我们希望他能漂亮，善解人意，能力出众，温柔贤惠。...对于编辑器来说，要能设置漂亮的界面，能够代码提示和自动补全，能够支持各种语言和代码检查，能够方便快捷的操作。 感觉VScode就是集成了各种编辑器的优点。...识别 "xml": { "attr_quotes": "single" } }, // 在react的jsx中添加对emmet的支持 "emmet.includeLanguages...格式化代码时无法正确格式化vue的style和script块（缩进为4个空格）。
CSS Peek在开前端开发过程中节省了好多查找样式的时间 5 ES7 React/Redux/GraphQL/React-Native snippet React-快速生成代码块 通过输入一些简写快速生产对应代码块...如 imr→ import React from ‘react’。...javascript代码检测工具，可以让你的代码写的更加规范 10 GitLens — Git supercharged 在vscode中使用git必备插件，功能非常强大 11 git graph 可以进行版本管理...15 HTML Boilerplate 通过使用 HTML模版插件，摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。...，写代码时动力十足 32 REST Client REST Client 扩展工具允许你发送 HTTP 请求并直接在 VSCode 中查看响应。
作者：大古同 https://juejin.cn/post/6947872709208457253 前端代码规范对于团队而言至关重要，既可以提高代码的可维护性，也可以降低代码多人维护的成本 那如何搭建一个规范的前端项目基础呢...接下来让我告诉你 创建一个基础项目 使用 npm init \-y 初始化一个前端项目,这会自动生成package.json 文件。...意味着可以在编码阶段发现存在的隐患，而不用把隐患带到线上去 TypeScript 会包括来自 ES6 和未来提案中的特性，比如异步操作和装饰器，也会从其他语言借鉴特性，比如接口和抽象类 TypeScript...: React 代码规范的校验规则 react/jsx-key:用来检查是否声明了 key 属性 no-array-index-key:用来检查是否使用了数组索引声明 key 属性 ....其他 React.../recommended作为基本规则集 添加了两个 React Hooks 规则，并取消了 react/prop-types 规则,因为 prop 类型与 React 和 TypeScript 项目无关
结尾标签） Babel JavaScript ES201x，React JSX，Flow和GraphQL的JavaScript语法突出显示。...Bash Debug 一个基于超赞bashdb脚本的bash调试器GUI前端（bashdb现在包含在软件包中）。 Better Comments 更好的注释扩展，将帮助您在代码中创建更人性化的注释。...只需注意左侧的灯泡，然后按一下它即可了解如何在光标下转换代码。 json2ts 可将JSON转换为TypeScript接口。您可以从VS Code中浏览和安装扩展。...- Code formatter 更漂亮-代码格式化程序 Remote - SSH Visual Studio代码远程-SSH Remote - SSH: Editing Configuration...Browser Preview,在vscode中实现预览调试 Settings Sync 上传和拉取 vscode 可以快速完成配置，自动安装相关扩展 搜索扩展并安装Settings Sync 拉取公共配置文件和扩展
今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。在接下来的日子，我会持续分享前端反卷计划中的每个知识点。以下是前端反卷计划的内容：图片图片目前这些内容持续更新到了我的 学习文档 中。...感兴趣的欢迎一起学习！环境搭建组件库名字因为我们的组件库要发布到npm上面，所以你的组件库名称不能和其他npm包的名称重复。...: true, // 启用JSX语法支持 }, }, plugins: [ 'react', // React相关的ESLint插件 '@typescript-eslint',...': 'off', // 关闭prop-types检查，如果你不使用prop-types 'react/react-in-jsx-scope': 'off', // 关闭React在JSX中的全局引入...+(js|ts|jsx|tsx)' "执行 pnpm format进行格式化图片在根目录创建vscode/settings.json，这个告诉vscode进行的配置。
Naming 扩展名: 用 .jsx 作为组件扩展名。 文件名: 用大驼峰作为文件名，如：ReservationCard.jsx。 参数命名: React 组件用大驼峰，组件的实例用小驼峰。...bad // good JSX 里的大括号不要空格。...eslint: `jsx-a11y/no-access-key` Why? 使用屏幕阅读器和键盘的人使用的键盘快捷键和键盘命令之间的不一致使得可访问性变得复杂。...另外，这也意味着你的代码可以忽略类型检查。...除非你更喜欢把不需要的props属性传入组件。而且对于 v15.6.1 及更早以前的 React， 你只能给DOM元素传非HTML属性的props。
1、安装 vscode 插件 eslint 和 Prettier 要知道 eslint 和 Prettier 所做的事情都是基于编辑器支持的，所以我们做的所有的事情基本都是做给编辑器看的，配置的所有参数配置也是为了编辑器配置的...2、设置 vscode 让其支持保存自动格式化、支持 React 语法 2、项目安装npm依赖包 这些包都可以安装到 devDependencies 也就是 npm i -D XXX 或者 yarn add...中验证右括号位置 'react/jsx-curly-spacing': [2, {'when': 'never', 'children': true}], //在JSX属性和表达式中加强或禁止大括号内的空格...0, //JSX中不允许使用箭头函数和bind 'react/jsx-no-duplicate-props': 2, //防止在JSX中重复的props 'react/jsx-no-literals...'react/no-deprecated': 1, //不使用弃用的方法 'react/jsx-equals-spacing': 2, //在JSX属性中强制或禁止等号周围的空格 'no-unreachable
img React React 可以让我们专注于构建用户界面，而不需要再手动维护 dom 元素的更新，当然还可以用 VUE。 安装核心库 react ，以及渲染 Web 的 react-dom 。...('app') ); npm run dev 看下效果： img 这里会发现上边都调用了 React.createElement 来创建元素，如果页面复杂的的话，那一层套一层就太繁琐了，React...这里的话使用第二种方式，让 Babel 和 TSC 各司其职。 首先安装 TypeScript 以及 React 的 type 。...Prettier prettier 主要做代码风格上的检查，字符串双引号还是单引号？几个空格？类似这样的。...为了保存的时候自动帮我们格式化，我们可以安装 Vscode 的 Prettier 插件，以及再修改 Vscode 的配置。
这就是 JSX ，它是 JavaScript 的扩展，允许我们以类似于 HTML 的函数语法编写函数调用。...你可以尝试在 Button 函数内返回其他 HTML 元素，看看它们是如何被支持的（例如，返回 input 元素或 textarea 元素）。1....在创建 React 组件时应该牢记这一点。我们不是在写 HTML，而实在使用 JS 扩展来创建 React 元素（实际上是 JS 对象）的函数调用。...第一个字母是大写字母，这是一个规定，因为我们在处理混合的 HTML 元素和 React 元素时，JSX 编译器（如 Babel ）会将所有以小写字母开头的名称视为 HTML 元素。...它只是一个JavaScript扩展，它允许我们用一个看起来像HTML 模板的语法来表示React的对象树。浏览器根本不需要处理 JSX ，React 也不必处理它！只有编译器才有。
这就是 JSX ，它是 JavaScript 的扩展，允许我们以类似于 HTML 的函数语法编写函数调用。...你可以尝试在 Button 函数内返回其他 HTML 元素，看看它们是如何被支持的（例如，返回 input 元素或 textarea 元素）。React实战视频讲解：进入学习1....在创建 React 组件时应该牢记这一点。我们不是在写 HTML，而实在使用 JS 扩展来创建 React 元素（实际上是 JS 对象）的函数调用。...第一个字母是大写字母，这是一个规定，因为我们在处理混合的 HTML 元素和 React 元素时，JSX 编译器（如 Babel ）会将所有以小写字母开头的名称视为 HTML 元素。...它只是一个JavaScript扩展，它允许我们用一个看起来像HTML 模板的语法来表示React的对象树。浏览器根本不需要处理 JSX ，React 也不必处理它！只有编译器才有。
的风格设置 例如 tabSize：一个tab等于2个空格，行高为24px workbench是针对vscode的主题设置 例如 iconTheme（ 图标风格）：使用插件 vscode-great-icons...Git History 对比查看git历史版本 indent-rainbow 凸显缩进着色，让你的缩进一目了然 ---- 水桶套装！.../JS snippets 快速书写React(非react项目，禁用) 【js文件】 React Native Tools 支持React Native项目，快速书写 es6 及 jsx (非react...已经内置emmet,这一设置最大作用是：当输入的文本不属于Emmet定义的缩写规则时，依然允许使用Tab键进行扩展。...": "javascriptreact", // 在 react 的jsx中添加对emmet的支持 }, // ===================格式化文件================
这样，怎么从标签拿到对应的 fiber 节点我们就知道了。 那如何拿到组件在源码的文件和行列号呢？ 这个通过 fiber 节点的 _debugSource 属性。...是 babel 插件做的： @babel/plugin-transform-react-jsx-source 这个插件内置在 @babel/preset-env 里，不用手动引入。...它会在编译 jsx 的时候添加 _source 属性，然后 react 源码里再把 _source 属性的值添加到 fiber._debugSource 上。 那如何打开 vscode 呢？...所以更推荐用 click-to-react-component 来快速定位源码。..._debugSource 拿到源码文件路径和行列号。 然后通过 vscode://file/xxx 的方式直接 vscode 打开对应文件行列号。 这样就完成了点击页面元素，打开对应源码的功能。
Prettier prettier的意思是漂亮的，但其实我觉得，“美化代码”并不是它的核心功能，它的核心功能是“统一代码规范”（当然了，是用漂亮的规范去统一哈哈）。...A,B:好，那咱就这么办 如何使用Prettier 在VScode上下载Prettier扩展插件，最好把编辑器重启一下。...，有VScode的Prettier插件就足够指导开发了，如果你想一次性把全部JS/JSX文件全部格式化一遍，可以这样，在根目录下运行： yarn prettier --write '..../src/**/*.jsx’ 运行示例 右边是格式化后的 ?...ESlint的使用 在VScode上下载Eslint扩展插件，最好把编辑器重启一下 设置Eslint这个VScode扩展插件的AutoFix功能，如图所示 在项目下安装eslint命令行并进行初始化
JSX 是React 为JavaScript 语法带来的可选扩展，用于在JavaScript 代码中编写声明式XML 风格语法。...但拥抱它会带来如下好处 XML 包含特性的元素树非常适合表示UI。 能够更精确和更方便地呈现应用程序的结构。 是普通JavaScript，并不会改变这门语言的语义。...React 的创造者只是让JSX 足够像HTML，这样就可以用来正确地描述Web 界面，并没有忽略这样一个事实，即它仍然应该遵循JavaScript 的风格和语法 2 JSX 和HTML 的不同之处 2.1...由于JSX 只是JavaScript的一种语法扩展，它遵循了DOM 所定义的特性命名规范。...尽管并无可能在JSX 中使用“if”语句，但仍有根据条件渲染内容的方法，包括使用三元表达式和将条件赋值给一个变量(空值和未定义的值都会被React 进行处理，JSX在转义时什么都不会输出)。
顾名思义，Auto Rename Tag可以在一个标签更改时自动更新另一个标签： 这款扩展不仅可以在HTML中使用，也可用于React，因为React使用了JSX： 上述示例中标签内只有一个文本，但是在真正的应用程序中...，大量的标签和元素嵌套在一起，手工更新非常困难且麻烦。...同一个文件内嵌套的组件、函数、对象等带来的大量括号很容易让人摸不着头脑： 例如下述代码示例： 第一眼看上去，区分不同的代码块很困难，但是Bracket Pair Colorizer扩展可以将对应的括号着色...考虑下述代码： 这段代码有许多格式问题，例如： 单引号和双引号混用 不规则的分号用法 第6行的console语句缩进不恰当 下图演示了如何使用Prettier来格式化并修复以上错误： 该扩展支持Prettier...该扩展最好的一点就是能通过Git blame和code lens的功能，将代码的作者可视化。 下面是更详细的代码作者的信息： 这只是GitLens的诸多功能之一。
不仅会浪费了时间和精力，可能会导致以下问题： 可读性差 维护困难 变更历史不透明 自动化工具的不兼容 如何统一代码风格，规范提交呢呢？...如项目中未有.gitgnore 文件，建议先创建 Git 忽略提交文件： 在项目跟目录创建一个 ".gitignore" 的文件来指定需要被忽略的文件或目录。...通常可用于在推送到远程仓库之前进行更严格的代码检查和验证。 prepare-commit-msg：在打开提交消息编辑器之前触发。可以用于自动生成提交消息、添加代码相关的信息等。...# 配置 ctrl + s ，自动保存功能 第一种，在 vscode 设置里面配置 点击 Vscode 的设置=>工作区=>文本编辑器 # Commitizen 是一个命令行工具，用于以一致的方式编写规范的提交消息...See https://github.com/jsx-eslint/eslint-plugin-react#configurationopen in new window .
原理简化 构建时 首先如果在浏览器端想知道这个组件属于哪个文件，那么不可避免的要在构建时就去遍历代码文件，根据代码的结构解析生成 AST，然后在每个组件的 DOM 元素上挂上当前组件的对应文件位置和行号...本地服务 还记得 create-react-app 或者 vue-cli 启动的前端项目，在错误时会弹出一个全局的遮罩和对应的堆栈信息，点击以后就会跳转到 VSCode 对应的文件么？...这个变量，和组件上的相对路径拼接后得到完整路径，这样 VSCode 才能顺利打开。...如何在元素上埋点 在浏览器端能找到节点在 VSCode 里的对应的路径，关键就在于编译时的埋点，webpack loader 接受代码字符串，返回你处理过后的字符串，用作在元素上增加新属性再合适不过，我们只需要利用...DOM 元素，如何获取组件的名称？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
