typescript项目eslint配置

1、装包

1
npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

2、配置eslint规则(.eslintrc.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
module.exports = {<!-- -->
  'parser': '@typescript-eslint/parser',
  'plugins': ['@typescript-eslint'],
  'rules': {<!-- -->
    'no-var': 'error',// 不能使用var声明变量
    'no-extra-semi': 'error',
    '@typescript-eslint/indent': ['error', 2],
    'import/extensions': 'off',
    'linebreak-style': [0, 'error', 'windows'],
    'indent': ['error', 2], // error类型,缩进2个空格
    'space-before-function-paren': 0, // 在函数左括号的前面是否有空格
    'eol-last': 0, // 不检测新文件末尾是否有空行
    'semi': ['error', 'always'], // 必须在语句后面加分号
    'quotes': ['error', 'single'],// 字符串没有使用单引号,double,single
    'no-console': ['error', {<!-- --> allow: ['log', 'warn'] }],// 允许使用console.log()
    'arrow-parens': 0,
    'no-new': 0,//允许使用 new 关键字
    'comma-dangle': [2, 'never'], // 数组和对象键值对最后一个逗号, never参数:不能带末尾的逗号, always参数:必须带末尾的逗号,always-multiline多行模式必须带逗号,单行模式不能带逗号
    'no-undef': 0
  },
  'parserOptions': {<!-- -->
    'ecmaVersion': 6,
    'sourceType': 'module',
    'ecmaFeatures': {<!-- -->
      'modules': true
    }
  }
};

3、配置vscode规则

在根目录新建.vscode文件夹
新建setttings.json文件

1
2
3
4
5
6
7
8
9
10
11
{<!-- -->
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {<!-- -->
    "source.fixAll.eslint": true
  }
}

4、vscode设置中搜索emmet.include设置保存自动格式化文档

1
2
"editor.formatOnType": true,
"editor.formatOnSave": true

在这里插入图片描述

5、测试

在这里插入图片描述