首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Vue学习笔记4-项目开发规范及插件

    都是针对 vue 的插件(可以这样说, volar 是 vue3 的配套,vetur 是 vue2 的配套); DotENV:.env 文件语法高亮; ESLint:件化的 javascript 代码检测工具...JSX "jsx": "preserve", // 解析非相对模块名的基准目录查看 模块解析文档了解详情 "baseUrl": "...": true, "resolveJsonModule": true, // 若有未使用的局部变量则抛错 "noUnusedLocals": true, // 若有未使用的参数则抛错..."noUnusedParameters": true, // 启用实验性的ES装饰器 "experimentalDecorators": true, // 编译过程中需要引入的库文件的列表...没有它你的代码也能运行,有了它你的代码可以写的更漂亮。ESLint还支持插件,第三方框架会基于ESLint写出自己的代码检查插件。比如Vue3对应eslint-plugin-vue。

    29640

    React Object实现React对象

    这就意味着在类中申明的方法在执行时并不会自动属于当前实例,必须在构造函数中显示的使用.bind(this)方法绑定到当前实例: class SayHello extends React.Component...,目前这个功能还是实验性的,双箭头的表达式很有可能会调整。...代码混合器 注意: ES6在目前的方案中并不支持代码混合功能,因此在使用ES6编写React代码时并不能实现相关功能。...所有混合器的生命周期方法都会被调用,React会按照混合器设定的顺序来执行。 不使用JSX 对于React来说JSX并不是必须要使用的表达式。当在环境中不想在家额外的编译工具时尤其适用。...每一个JSX的元素都仅仅是React.createElement(component, props, ...children)的语法糖,所以任何使用JSX表达式实现的内容都可以直接用JavaScript

    82120

    ESLint 配置入门

    "root": true 对项目中的某个文件的 ESLint 应用逻辑是,从它所在目录往上递归,找到所有的 ESLintrc 文件,直到根目录 /。...配置项 parserOptions ESLint 默认使用 ES5 的语法来解析代码。如果你的代码 用了高版本的 ES,就要配置 parserOptions,指定转换 AST 所基于的版本。..."latest"(当前 ESLint 支持的最新版本) sourceType:可以设置为 "script" (默认) 或 "module"(使用模块化) allowReserved:允许使用保留字来作为变量名...它是一个对象,包括 jsx、impliedStrict(启用全局的 "use strict;")、globalReturn(全局作用域可以 return,像 commonjs 模块本质是用函数实现的)。...配置项 parser ESLint 默认的 parser 只支持 js,且仅支持最终的 ES 标准,不支持实验性质的特性。

    1.5K20

    React学习(8)—— 高阶应用:不使用ES6、JSX实现React

    这就意味着在类中申明的方法在执行时并不会自动属于当前实例,必须在构造函数中显示的使用.bind(this)方法绑定到当前实例: class SayHello extends React.Component...,目前这个功能还是实验性的,双箭头的表达式很有可能会调整。...代码混合器 注意: ES6在目前的方案中并不支持代码混合功能,因此在使用ES6编写React代码时并不能实现相关功能。...每一个JSX的元素都仅仅是React.createElement(component, props, ...children)的语法糖,所以任何使用JSX表达式实现的内容都可以直接用JavaScript...ReactDOM.render( React.createElement(Hello, {toWhat: 'World'}, null), document.getElementById('root') ); 如果你对JSX

    54810

    会写 TypeScript 但你真的会 TS 编译配置吗?

    IDE(代码编辑器)将会根据 tsconfig.json 文件来对当前项目中支持不同程度的类型约束,同时也是对 TSC 编译 TypeScript 代码过程做一些预定义、约束入口和编译输出目录等配置。...(8). jsx 如果是有 jsx 语法需要支持的项目,可以设置值 preserve、react 等 { "compilerOptions": { "jsx": "preserve", //...个人建议是设置为 true 来启用。 (10).experimentalDecorators experimentalDecorators 用于声明是否启实验性用装饰器模式。...当前对于 Decorator 的支持性不太好,如果是一些涉及到使用了装饰器的需要,就需要开启这个属性。...TypeScript 语法的编译支持,再看看对 ts-loader 的介绍: ts-loader 换句话说,ts-loader 实际调用了 TSC 来编译 TS 文件,TSC 的配置依赖于你项目中的

    3.8K41

    如何在React Native中添加自定义字体

    要跟上进度,你应该熟悉 React Native 或 Expo SDK 的基础知识,包括 JSX、组件(类和函数式)和样式。...Expo 支持两种字体格式,OTF 和 TTF,这两种格式在 iOS、Android 和 Web上都能稳定运行。如果你的字体是其他格式,你将需要进行高级配置。.../raleway @expo-google-fonts/quicksand 如果你有其他想要使用的Google字体,你可以在这里查看Expo支持的可用字体。...useFonts 钩子的结果是一个布尔值数组,我们使用 const [fontsLoaded] 语法进行解构,以访问它返回的布尔值。...在我们的模拟器中看看这是什么样子: 使用自定义字体 假设你正在构建一个个人的 React Native 项目,并且你得到了一些自定义字体,这些字体并不在 Expo 支持的 Google 字体库中。

    61610

    使用umi开发react-native应用

    当工作中涉及到 react-native(后文简称:RN)应用的内容时,发现 umi 暂时没有支持RN的打算。...,可选react-navigation; 启用dynamicImport配置后,支持拆包,运行时从本地按需加载 JS bundle 文件。...概览 NPM 包 简介 umi-plugin-antd-react-native 为@ant-design/react-native提供按需加载,主题定制、预设、切换,国际化支持,在expo中链接字体图标...如果你的 RN 工程安装了多种开发工具,则必须通过 umi 配置指定当前使用哪一个: 使用expo: // .umirc.js export default { expo: true, haul...缺省情况下: 如果未启用dynamicImport配置,则会使用一个内置的简陋 Loading; 如果启用dynamicImport配置,则会使用dynamicImport.loading; 如果未实现自定义的

    6.3K30

    TS 常见问题整理(60多个,持续更新ing)

    为了支持 CommonJS 和 AMD 的 exports,TypeScript 提供了 export = 语法。export = 语法定义一个模块的导出对象。...使用 as 替代尖括号表示类型断言 在 TS 可以使用尖括号来表示类型断言,但是在结合 JSX 的语法时将带来解析上的困难。因此,TS 在 .tsx 文件里禁用了使用尖括号的类型断言。...配置 dom.iterable 和 downlevelIteration 就可以正常运行 tsconfig.json { /*当目标是ES5或ES3的时候提供对for-of、扩展运算符和解构赋值中对于迭代器的完整支持...*******/ /**************额外的语法检查配置,这种检查交给 eslint 就行,没必要配置**************/ /* 有未使用到的本地变量时报错...三种 JSX 模式 在 TS 中想要使用 JSX 必须做两件事: 给文件一个 .tsx 扩展名 启用 jsx 选项 TS 具有三种 JSX 模式:preserve,react 和 react-native

    15.4K77

    为何一个不大的博客程序就能吃掉700+MB内存?

    初始化 bun 的初始化简单直接,使用下列指令会直接将当前目录初始化为一个 bun 项目工程: bun init -y 参数-y 代表静默,不需要提问,所有初始化产生的副任用产品都在当前目录下,所有配置在完成后都可以在文件中修改...也可能是当前这个只打印一行“hello world”的程序太简单了,下面我换一个稍微复杂的博客程序进行测试,首次是一般模式: 使用了 bun,未启用 smol 占用了约 730MB 内存了,好家伙,...使用 JSX 语法 下面试用 jsx 功能,首先安装类库: bun install react react-dom 然后分别创建两个文件: // message.tsx export default function...bun 靠文件的后缀名决定要启用什么样的加载器,当我们在文件内使用 jsx 语法时,文件后缀就必须写成 tsx 或 jsx。...这一篇就说到这里,主要介绍了 bun 在运行时会占用大量内存,以及如何使用 jsx 语法,下一篇继续介绍 bun。

    1.3K40

    Taro

    P.S.关于编译转换的更多信息,请查看再看编译原理与Babel快速指南 模板的转换 把 JSX 语法转换成可以在小程序运行的字符串模板。...这些API都可以直接使用,不用关心当前平台是否支持,因为运行时框架的适配工作的一部分就是抹平平台能力API差异,例如: H5 端就无法调用扫码、蓝牙等端能力 采用微信小程序标准,所以这些 API 在 H5...JSX,毕竟JSX的灵活性令人发指(动态组件、高阶组件),同时微信小程序的模板语法又限制极多(即便通过WXS这个补丁增强了一部分能力),这就出现了一个不可调和的矛盾,因此: JSX 的写法极其灵活多变,...限制如下: 不支持动态组件 不能在包含 JSX 元素的 map 循环中使用 if 表达式 不能使用 Array#map 之外的方法操作 JSX 数组 不能在 JSX 参数中使用匿名函数 不允许在 JSX...参数(props)中传入 JSX 元素 只支持class组件 暂不支持在 render() 之外的方法定义 JSX 不能在 JSX 参数中使用对象展开符 不支持无状态组件(函数式组件) props.children

    1.7K50

    深度测评 | 五大主流多端开发框架全面对比

    整体来说比 RN 要配置的复杂一些,对前端开发来说,Dart 语法是一个挑战,编写应用除了 Dart 之外还需要理解 Flutter 自己的状态管理机制,widget 概念以及对应的 material...因为很多公司目前的业务场景都是需要在不同的 APP 里跑的,所以是否支持多端对我们国内用户来说很重要,笔者特意增加了这一对比项。...4.2 API 支持,组件丰富程度 这部分从 API 层面对比五个框架对原生能力的支持情况和组件支持的情况。...React,Vue,Angularjs,JS,TS 开发 NativeScript 31 87 实时调试能力太弱 AVM 31 219 实时调试能力强,类 Vue 语法兼容 React JSX 来源参考...TS 和其他语言框架,只支持 JS 语法。

    5.3K30

    跨平台开发框架到底哪家强?5款主流框架横向对比!

    1.5 AVM AVM 是由 APICloud 研发的一套跨端的 JavaScript 框架,全称(APICloud-View-Model),写法类 Vue 也兼容 React JSX,有双向绑定,组件化和状态管理支持...因为很多公司目前的业务场景都是需要在不同的APP里跑的,所以是否支持多端对我们国内用户来说很重要,笔者特意增加了这一对比项。...4.2 API 支持,组件丰富程度 这部分从 API 层面对比五个框架对原生能力的支持情况和组件支持的情况。...,Vue,Angularjs,JS,TS 开发 NativeScript 31 87 实时调试能力太弱 AVM 31 219 实时调试能力强,类 Vue 语法兼容 React JSX 来源参考: RN...和其他语言框架,只支持 JS 语法。

    7.1K20

    React Native 项目 Web 端同构初探

    当然值得注意的是,官方文档明确表示不支持 React Native 中不推荐使用的组件和 API,因此如果您项目中的某些功能依赖第三方库,可能那部分的功能在 web 端同构时需要额外处理。...expo-cli 中已经预置了对web的支持,如下图所示....webpack-dev-server html-webpack-plugin react-dom babel-loader url-loader @svgr/webpack 接着我们施展Copy大法,将我们初始化能用到的App.web.jsx...在当前案例中,我们只是设置一些基本样式以使主体div具有完整的高度和宽度: ... ......后记 结合上述的简单案例,在后续实际业务中,我们可以逐步尝试同构业务到Web并逐步进行验证。 希望这篇文章对您有所启发,也请各位大佬多多指教!评论区始终为您敞开!

    3.5K30

    多端统一开发框架 Taro 1.0 正式发布

    更加丰富的 JSX 语法支持 前面已经提到 Taro 使用 React 语法规范来开发多端应用,这样就必然是采用 JSX 来作为模板,所以 Taro 需要将 JSX 编译成各个端支持的模板,其中以小程序端最为复杂...在开源的过程中,Taro 支持的 JSX 写法一直在不断完善,力求让开发体验更加接近于 React,主要包括以下语法支持: 支持 Ref,提供了更加方便的组件和元素定位方式 支持 this.props.children...写法,方便进行自定义组件传入子元素 在循环体内执行函数和表达式 定义 JSX 作为变量使用 支持复杂的 if-else 语句 在 JSX 属性中使用复杂表达式 在 style 属性中使用对象 只有使用到的变量才会作为...state 加入到小程序 data,从而精简小程序数据 目前,除了 Taro 官方 ESLint 插件 eslint-plugin-taro 中限制的语法之外,其他 JSX 语法基本都支持,而在原生组件化的帮助下...Taro 也注意到了这一趋势,在开源之初就提供了对 TypeScript 的支持。

    1.1K20

    Biome:更快的格式化和 Linting

    Biome 是一个速度极快的代码格式化工具,支持 JavaScript、TypeScript、JSX 和 JSON。...Biome 还是一个性能出色的 linter 工具,支持 JavaScript、TypeScript 和 JSX,提供了超过 200 条规则,这些规则来自 ESLint、typescript-eslint...在 Biome v1.7 中,增加了对 Prettier 的 overrides 支持,并尝试将 .prettierignore 的全局模式转换为 Biome 支持的模式。...目前,支持两种报告格式:json 和 json-pretty。 请注意,报告格式是 实验性的,未来可能会有所变化。...这对于确保你想要提交的文件已经格式化和 linter 检查非常有用: 这个功能非常适合用来编写你自己的 pre-commit 脚本[11]。请注意,对于暂存文件上的未暂存更改 不会被忽略。

    35210

    ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State

    当然用记事本是开玩笑的,可以用Sublime Text、Visual Studio Code等,如果比较土壕的程序员呢,你可以支持一下正版的Webstorm。...安装完后,会在模拟器上看到Expo这个App, 下方我们就会用到这个Expo。 npm install exp --global ? ?...在RN中支持TS开发,有相关的文档(https://github.com/Microsoft/TypeScript-React-Native-Starter) ?...封装的组件的使用姿势与RN提供组件的使用姿势是一样的,都是通过JSX的语法来引入使用的。下方 就是我们封装组件HelloWorld的使用姿势。 ?...改类型中有一个属性,从状态属性我们不难看出是用来控制某个空是否展示白色的。 初始State:我们指定状态类型后,该状态还需要一个初始状态,于是在构造器中对该状态进行了初始化。

    89220
    领券