1 代码检查
代码检查主要是用来发现代码错误、统一代码风格。JavaScript 中常用 ESLint 进行类型检查,同样 TypeScript 也使用 ESLint 进行类型检查,但 TypeScript 还需要额外的支持 TypeScript 语法的插件 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin 等,
1.1 使用 typescript-eslint
先安装npm i -D typescript-eslint typescript eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
然后配置 .eslintrc.js 文件:
// .eslintrc.jsmodule.exports = {parser: '@typescript-eslint/parser',plugins: ['@typescript-eslint'],rules: {// 禁止使用 var'no-var': "error",// 优先使用 interface 而不是 type'@typescript-eslint/consistent-type-definitions': ["error","interface"]}}
2 使用 Prettier 统一编码风格
VSCode 中安装插件 Prettier ,并配置 .prettierrc.js 文件,进而统一编码风格
// prettier.config.js or .prettierrc.jsmodule.exports = {// 一行最多 100 字符printWidth: 100,// 使用 4 个空格缩进tabWidth: 4,// 不使用缩进符,而使用空格useTabs: false,// 行尾需要有分号semi: true,// 使用单引号singleQuote: true,// 对象的 key 仅在必要时用引号quoteProps: 'as-needed',// jsx 不使用单引号,而使用双引号jsxSingleQuote: false,// 末尾不需要逗号trailingComma: 'none',// 大括号内的首尾需要空格bracketSpacing: true,// jsx 标签的反尖括号需要换行jsxBracketSameLine: false,// 箭头函数,只有一个参数的时候,也需要括号arrowParens: 'always',// 每个文件格式化的范围是文件的全部内容rangeStart: 0,rangeEnd: Infinity,// 不需要写文件开头的 @prettierrequirePragma: false,// 不需要自动在文件开头插入 @prettierinsertPragma: false,// 使用默认的折行标准proseWrap: 'preserve',// 根据显示样式决定 html 要不要折行htmlWhitespaceSensitivity: 'css',// 换行符使用 lfendOfLine: 'lf'};
3 编译选项
TypeScript 提供了非常多的编译配置选项
| 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| allowJs | boolean | false |
允许编译 JavaScript (通常在混编时开启) |
| allowSyntheticDefaultImports | boolean | false |
允许对不含默认导出的模块使用默认导入 |
