如何为TypeScript配置Visual Studio Code解决代码规范错误？

问题描述 #

我用TypeScript开发的经验不多，部署函数到服务器时碰到一堆代码规范错误，比如“每行字符数不能超过80个”“代码块不能有多余空格”“不能用var，得换成let或const”还有缩进错误之类的。错误太多了，我怀疑配置VSCode的时候漏了步骤，比如能不能在编辑器里加一条垂直线当80字符限制的视觉提示？

补充错误示例：

26:32   警告  'context'已定义但从未使用                                           @typescript-eslint/no-unused-vars
45:1    错误  缺少JSDoc注释                                                         require-jsdoc
46:1    错误  预期缩进4个空格，但实际为2个                                          indent
47:1    错误  预期缩进4个空格，但实际为2个                                          indent
48:1    错误  预期缩进4个空格，但实际为2个                                          indent
49:1    错误  预期缩进0个空格，但实际为2个                                          indent
55:3    错误  不应使用var，请改用let或const                                      no-var
55:7    错误  数字字面量可自动推断类型，无需显式标注                                @typescript-eslint/no-inferrable-types
55:28   错误  缺少分号                                                             semi
56:3    错误  不应使用var，请改用let或const                                      no-var
56:7    错误  字符串字面量可自动推断类型，无需显式标注                              @typescript-eslint/no-inferrable-types
56:34   错误  缺少分号                                                             semi
57:3    错误  不应使用var，请改用let或const                                      no-var
57:7    错误  字符串字面量可自动推断类型，无需显式标注                              @typescript-eslint/no-inferrable-types
57:29   错误  缺少分号                                                             semi
64:1    错误  该行长度为83，最大允许长度为80                                       max-len
64:84   错误  缺少分号                                                             semi
66:20   错误  缺少分号                                                             semi
67:50   错误  缺少分号                                                             semi
68:21   错误  缺少分号                                                             semi
70:20   错误  缺少分号                                                             semi
71:26   错误  缺少分号                                                             semi
72:47   错误  缺少分号                                                             semi
73:6    错误  不允许存在尾随空格                                                   no-trailing-spaces
78:1    错误  该行长度为112，最大允许长度为80                                      max-len
78:113  错误  缺少分号                                                             semi
81:24   错误  箭头函数参数应添加括号                                               arrow-parens
82:47   错误  缺少分号                                                             semi
85:20   错误  缺少分号                                                             semi
86:21   错误  缺少分号                                                             semi
88:20   错误  缺少分号                                                             semi
89:26   错误  缺少分号                                                             semi
90:47   错误  缺少分号                                                             semi
91:6    错误  不允许存在尾随空格                                                   no-trailing-spaces
93:1    错误  不允许存在尾随空格                                                   no-trailing-spaces
94:48   错误  缺少分号                                                             semi
99:32   警告  'context'已定义但从未使用                                           @typescript-eslint/no-unused-vars
130:18  警告  'response'已定义但从未使用                                          @typescript-eslint/no-unused-vars

解决方案 #

1. 添加80字符限制垂直线

打开VSCode设置（快捷键Ctrl+,/Cmd+,），搜索editor.rulers，点击「在settings.json中编辑」，添加：

"editor.rulers": [80]

编辑器会在80字符位置显示竖线，直观提醒换行。

2. 自动修复大部分规范错误

你的错误都是ESLint检测结果，大部分可自动修复：

• 安装VSCode的ESLint插件
• 打开设置，搜索editor.codeActionsOnSave，添加配置：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

每次保存文件时，ESLint会自动修复缩进、分号、var转let/const、尾随空格等问题。

3. 针对性处理剩余错误

• 未使用变量警告：直接删除无用变量；若需保留，加注释跳过检查：// eslint-disable-next-line @typescript-eslint/no-unused-vars
• 缺少JSDoc注释：不需要的话，在ESLint配置文件里把require-jsdoc设为off；需要的话按规范添加：

/**
 * 示例函数
 * @param param1 参数说明
 * @returns 返回值说明
 */
function demo(param1: string): string {
  return param1;
}

• 箭头函数参数括号：把x => x*2改成(x) => x*2；若想允许单参数省略括号，在ESLint配置中设arrow-parens: ["error", "as-needed"]
• 冗余类型注解：比如let num: number = 10，直接写成let num = 10即可，TypeScript会自动推断类型

4. 统一项目规范配置

在项目根目录创建.eslintrc.js，统一代码规则：

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: {
    'max-len': ['error', 80],
    'indent': ['error', 4],
    'semi': ['error', 'always'],
    'no-var': 'error',
    'no-trailing-spaces': 'error',
    'require-jsdoc': 'off', // 按需开启/关闭
    '@typescript-eslint/no-inferrable-types': 'off', // 按需允许冗余类型注解
    'arrow-parens': ['error', 'always'] // 或设为'as-needed'
  }
};

内容的提问来源于stack exchange，提问作者whatwhatwhat