本文讲的是如何将一个旧的 Node.js 项目使用 TypeScript 进行改造，包括目录结构调整、TypeScript-ESLint 配置、tsconfig 配置、调试、常见错误处理等。...找不到模块 Node.js 项目是 commonjs 规范，使用 require 导出一个模块：const path = require('path');首先看到的是 require 处的错误: Cannot...path 处的错误: 找不到模块“path”。...更要命的是，IDE和编译器没有任何报错。如果这个最基本的类型检查都解决不了，那我要 TypeScript 何用？...找不到声明文件 部分第三方包，其包内没有 ts 声明文件，此时报错如下: 无法找到模块“mod”的声明文件。
在不忙的时候，回过头重新把文档再通读一遍。这时候你会发现自己站在了一个新的高度，也会发现文档中的一些观点是自己以前没有注意的，这种感觉就对了。...例如不同开发人员用不同的 IDE，用相同 IDE 的又因为设置不同默认的缩进也不同。自己又懒得去设置，或者不会设置，最后就乱了。...现在 Prettier 支持 JS、TS、CSS，能够自动重新格式化这些代码，还有必要用各种 Linters 吗？如果 Prettier 和 ESLint/TSLint 一起用又会怎么样呢？...最近在发现有人写了一个专门的配置工具[16]： prettier-eslint 这个工具有两种用法： // 创建工程初始化的时候用 npm init prettier-eslint // 或直接使用 npx...前端代码不管TS还是ES，都用ESLint吧。具体看作者在Medium上的Blog[17]和相关Issue[18]。
算了，就用 HBuilderX 的 cli 先运行到手机或模拟器，然后后打开 app 的时候提示如下错误，点击忽略后发现应用无法正常运行。...导入代码块 uni-app 代码块（vscode） (github.com) 找不到模块“....'*.vue' { import { DefineComponent } from 'vue' // eslint-disable-next-line @typescript-eslint/no-explicit-any...} 然后就是把一些#ifndef VUE3不是 vue3 的代码块，以及部分 js 文件改写成 ts 文件即可。...迁移 HbuilderX 的 uniapp 项目到主流的前端 IDE 开发（支持 VS Code 等编辑器/IDE） 不过最终如果要在 app 或小程序端运行，还是得打开 HBuilder。
为了增强代码补全的类型参数信息，我们推荐你可以添加一个 TypeScript 类型定义文件 react.d.ts，作为当前项目的 JavaScript 库。...按住 Cmd-P 就可以重新调出参数和类型相关信息的弹出框。...在 JSX 标签中，IDE 给特定的 React 属性 提供代码辅助，比如 className 或 classID。...你可以在 Preferences | Editor | Inspections 中定制这一系列的检查。禁掉那些你并不想看到的，或者将安全等级从警告改成错误，反之亦然。...WebStorm 集成了 ESLint， 并且让你在输入的时候就可以在编辑器中看到 ESLint 所报告的警告和错误。
ESLint 会 重复执行 fix 函数，直到不再有新的可修复错误为止。 为什么要 fork 下来改写它？...如何删除变量 当我们在 IDE 中编写代码时，有时会发现保存之后一些 ESLint 飘红的部分被自动修复了，但另一部分却没有反应。这其实是 ESLint 的 rule fixer 的作用。.../type.ts"; // use IProps 在使用旧版的 fork-ts-checker-webpack-plugin 时，如果此时改动了 IProps 造成了类型错误，是不会触发 webpack...这里我断点跟进 ts.parseJsonConfigFileContent 函数内部，发现有一些比较隐蔽的参数和逻辑，用比较 hack 的方式支持了自定义后缀。...node.getName() : node.getText() }` ); } 优点 TS 的服务被各种 IDE 集成，经过无数大型项目检测，可靠性不用多说。
ESLint 会 重复执行 fix 函数，直到不再有新的可修复错误为止。 为什么要 fork 下来改写它？...如何删除变量 当我们在 IDE 中编写代码时，有时会发现保存之后一些 ESLint 飘红的部分被自动修复了，但另一部分却没有反应。 这其实是 ESLint 的 rule fixer 的作用。.../type.ts"; // use IProps 在使用旧版的 fork-ts-checker-webpack-plugin 时，如果此时改动了 IProps 造成了类型错误，是不会触发 webpack...这里我断点跟进 ts.parseJsonConfigFileContent 函数内部，发现有一些比较隐蔽的参数和逻辑，用比较 hack 的方式支持了自定义后缀。...node.getName() : node.getText() }` ); } 优点 TS 的服务被各种 IDE 集成，经过无数大型项目检测，可靠性不用多说。
我们使用IDE打开刚才创建的项目，整体项目如下所示，vite官方为我们提供了一个简单的demo。...浏览器访问后，空白页面，打开console后，发现main.js 404 难搞，找不到main.js，那我把main.ts后缀改一下试试。...将后缀改成js后，文件是不报错404了，但是又有了新的错误。 vite服务500和@别名无法识别，于是我打开ide的控制台看了错误，大概是scss的错，vite还没支持scss。...解决报错问题 在浏览CLI默认创建的demo时，打开main.js文件发现其中App.vue文件报类型错误，无法推导出具体的类型。...image-20201018224619607 尝试了很多方法，最后发现是不能通过src外链的问题，于是我把ts文件中的代码写在vue模版中报错就没了。
浏览器访问后，空白页面，打开console后，发现main.js 404 ? 难搞，找不到main.js，那我把main.ts后缀改一下试试。...将后缀改成js后，文件是不报错404了，但是又有了新的错误。 ? vite服务500和@别名无法识别，于是我打开ide的控制台看了错误，大概是scss的错，vite还没支持scss。 ?...解决报错问题 在浏览CLI默认创建的demo时，打开main.js文件发现其中App.vue文件报类型错误，无法推导出具体的类型。 ?...image-20201006162936370 仔细观察后，我们发现在目录上并没有什么大的区别，只是多了typescript的配置文件和项目内使用ts的时辅助文件。...image-20201018224619607 尝试了很多方法，最后发现是不能通过src外链的问题，于是我把ts文件中的代码写在vue模版中报错就没了。
版本管理 node: JS引擎 npm: 依赖管理 nrm: NPM镜像管理 nvm: Node版本管理 parcel: 项目构建 require: AMD项目构建 rollup: 项目构建 sea: CMD...格式化配置 eslint-config-standard: 标准配置 eslint-friendly-formatter: 错误友好提示 eslint-plugin-html: HTML内联JS语法校验...: 标准配置 tslint-plugin-react: React语法校验 结语 写到最后总结得差不多了，后续如果我想起还有哪些构建依赖遗漏的，会继续在这篇文章上补全，同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解...格式化配置 eslint-config-standard: 标准配置 eslint-friendly-formatter: 错误友好提示 eslint-plugin-html: HTML内联JS语法校验...: 标准配置 tslint-plugin-react: React语法校验 结语 写到最后总结得差不多了，后续如果我想起还有哪些构建依赖遗漏的，会继续在这篇文章上补全，同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解
Flow Flow的意义 Flow是faceBook开源的一个JavaScript静态类型检查工具，作用类似TypeScript，但是它不像TS那样是一门独立的语言，而是作为一个babel-plugin...,借助babel的编译切入JavaScript的编码当中，同时，与ts不同的是，Flow.js的类型检查不是强制的，可以通过//@flow手动开启，意味着，你可以自由选择某个文件是否开启类型检查。...类型匹配，无错误 ?...ESlint ESlint这种和我们朝夕相处的伙伴就不必过多解释了吧，它的作用是做一些静态检查，对于一些可能在JS运行时候才会报的错误立即检测出来。...你想如何使用eslint?1.检查语法2.检查语法并且发现问题3.检查语法，发现问题并强制约定代码风格 Q2. 你的项目使用的模块化方式？
正如前面我们提到的因团队成员之间编程能力和编码习惯不同所造成的代码质量问题，我们使用 ESLint 来解决，一边写代码一边查找问题，如果发现错误，就给出规则提示，并且自动修复，长期下去，可以促使团队成员往同一种编码风格靠拢...配置好以后，我们在 VSCode 或 WebStorm 等编辑器中开启 ESLin，写代码时，ESLint 就会按照我们配置的规则来进行实时代码检查，发现问题会给出对应错误提示和修复方案。...，会出现用 Prettier 格式化后的代码，ESLint 检测到格式有问题的，从而抛出错误提示。...假如这是一个历史项目，我们在中途配置了 ESLint 规则，那么在提交代码时，也会对其他未修改的“历史”文件都进行检查，可能会造成大量文件出现 ESLint 错误，显然不是我们想要的结果。...npm i @types/jest -D TypeScript 的编译器也会提示 jest 的方法和类型找不到，我们还需把 @types/jest 添加根目录下的 ts.config.json（TypeScript
高亮 自动完成另一侧标签的同步修改 通过css选择器快速跳至css文件 open in browser 括号加上不同的颜色 Debugger for Chrome ESLint 智能提示CSS类名以及...Auto Rename Tag 通过css选择器快速跳至css文件 CSS Peek 通过css选择器快速跳至css文件（Cmd+鼠标单击/Ctrl+鼠标单击）；悬停css选择器预览css定义（Cmd...+鼠标悬浮/Ctrl+鼠标悬浮） open in browser vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器...调试方式 ESLint js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置 智能提示CSS类名以及id HTML CSS Support 智能提示HTML标签...多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。
代码和TS代码，并生成大众浏览器可识别的ES5代码 「校验代码」：确保编写的语法无错误，统一规范团队协作中每位同事的代码编写风格，减少代码冗余，在保证代码语法正确的前提下提高代码的可读性 CSS校验：内置...stylelint，配置标准的CSS语法规则，检查和纠正出现的语法错误 JS校验：内置eslint，配置标准的JS和TS语法规则，检查和纠正出现的语法错误 「分割代码」：构建业务代码，将其分割成WebpackRuntime...细节 IDE相关 推荐使用VSCode开发项目，以下配置也是基于VSCode驱动 若启用Stylelint或Eslint，需在IDE上安装Stylelint插件和Eslint插件才能配合本项目校验代码并高亮显示警告和错误...RUN_ENV用于获取当前运行环境，在使用Eslint会报语法错误，在代码后面追加// eslint-disable-line即可 dev：开发环境 test：测试环境 prod：生产环境 文件导入快捷方式...由于自己项目开发经验和技术积累有限，不能保证本项目不存在任何Bug，若在后续使用本项目时发现Bug或产生疑问，可随时在Issues上提出你的宝贵建议，笔者会立马反馈和修复相关Bug。
咋一看，其实没啥区别，甚至可能发现新解决办法会更加麻烦了一些，其实步骤上确实如此，但是真正操作上，会减轻 eslint 的规则编写，也会减少很多手动修改样式的地方，格式化后的代码会更加美观，耐看。...大纲 统一团队使用的开发工具（webstorm，ide 编辑器） 安装 eslint 和 prettier （node 模块） 安装 eslint 和 prettier （ ide 编辑器的插件） 配置...这里多了一步是安装 eslint 和 prettier （ ide 编辑器的插件），主要就是利用 ide 编辑器做代码格式错误提醒和代码格式处理，这个操作也可以使用 webpack 打包的时候来做，也可以使用...---- 上面两种方式的默认快捷键都是Cmd/Ctrl-Shift-A（在 mac 下是comm+shift+A），觉得不舒服，按需修改快捷键即可。 ?...参考文档： 如何花 30 分钟解决 eslint 产生的各种错误 | Tomyail 的记忆现场 Introducing Prettier with Eslint – Michael Hsu – Medium
3.1.2 为什么达到30% 业务中的通常bug可以被分为两类，一类是类型错误（type error）引发的bug，这部分错误中的大多数是可以通过ts来避免的。...相信很多人会有这样的疑问：没错在VS Code里写TS很方便。但是这种不都是IDE本身提供的吗？ 事实上，这些能力其实是由TS本身提供的： 1....第三方的工具就可以通过这个api来直接使用ts语言服务的各种功能。 4. 通过这种方式，其他的ide，工具，也可以快速的集成TS的相关能力。...接下来把你团队原来的eslint规则包引入进来，基本上你会发现原来所有eslint规则都是可以正常工作的。你也可以继续使用rules属性来覆盖继承的规则。 4.3.3 依赖迁移 1....然而如果DT里面也找不到类型定义。那你需要做的就是，在d.ts里面declare一下这个module，可以自己给它添加类型定义，最终发布到DT上。 3. 更棘手的情况是类型找到了，但是有错。
另外，TS包含一个编译器，通过来你可以使用最新最稳定的JS特性，功能类似babel。 最后，最核心的部分，由于ts带来类型，所以你的工具，IDE可以更容易的理解你的代码。...业务中的通常bug可以被分为两类，一类是类型错误（type error）引发的bug，这部分错误中的大多数是可以通过ts来避免的。...相信很多人会有这样的疑问：没错在VS Code里写TS很方便。但是这种不都是IDE本身提供的吗？ ?...3、接下来把你团队原来的eslint规则包引入进来，基本上你会发现原来所有eslint规则都是可以正常工作的。你也可以继续使用rules属性来覆盖继承的规则。 依赖迁移 ?...2、然而如果DT里面也找不到类型定义。那你需要做的就是，在d.ts里面declare一下这个module，可以自己给它添加类型定义，最终发布到DT上。3、更棘手的情况是类型找到了，但是有错。
{ "main": "src/index.ts", "module": "src/index.ts" } 确认需要发布： 这里就注意需要修改成 build 后的文件作为入口，切记！切记！...04 - 找不到依赖项错误 如果出现以下错误，请先检查 testModules 是否已经正确 link 了 cat-web-storage 的源码！...in progress... 05 - 未找到ESLint配置错误 如果出现以下错误，请先检查是否已经将 resolve.symlinks 配置到 testModules 项目中！...$localStorage.set('number', 10086); // 情况三 ^ 此警告错误是因为缺少类型描述文件，即 *.d.ts 文件。...未找到 ESLint 配置错误，在这里也是花费了一些时间，主要是第一次遇到的时候报出了 ESLint 的错误，先入为主看着错误的字面意思我就是以为没有引入 ESLint 包，后来又引入了 ESLint
，我们肯定不希望手动一个个去修改，所以我们需要使用 eslint 的自动修复的功能，它能够帮助我们修复绝大数的错误，还有一些修复不了的我们再手动修复就可以了 这里写出了部分代码，更多细节可以在项目里面看...您安装了 eslint 插件后，需要在设置中设置 "eslint.autoFixOnSave": true，这样就可以在保存时自动修复 eslint 的错误了 当然您可能只在这个项目中使用了 eslint...ts 的话，那么配置别名了之后会失去类型，提示找不到模块，所以我们需要在编译器配置对应的别名才可以 tsconfig.json/jsconfig.json { "compilerOptions":...，这种问题往往会花费我们较长的时间才能发现这个 bug，原来是本地路径的大小写出现了问题，引用路径时我们本地是不区分大小写的。.../index.js"; 这样在本地是不会报错的，但是当你用 Jenkins 上线的时候，就会报错找不到 .
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
