typescript项目eslint配置

1、装包

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

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

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, { SwitchCase: 1 }], // 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文件

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

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

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

在这里插入图片描述

5、测试

在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TypeScript ESLint是一个用于TypeScript代码的静态代码分析工具。它结合了ESLintTypeScript的功能,可以帮助开发者在编写代码时发现潜在的问题和错误,并提供相关的建议和规范。 TypeScript ESLint的使用方式类似于ESLint的使用方法。首先,你需要在你的项目中安装相关依赖。你可以通过运行以下命令来安装TypeScript ESLint及其插件: ``` npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev ``` 安装完成后,你可以创建一个`.eslintrc.js`或`.eslintrc.json`配置文件,并配置TypeScript ESLint的规则和选项。你可以根据个人或团队的编码规范,选择合适的规则进行配置。 在配置文件中,你需要指定解析器和插件的信息,以及其他的规则和选项。以下是一个简单的示例配置文件: ```javascript module.exports = { parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended' ], rules: { // 自定义规则 } }; ``` 配置完成后,你可以使用命令行工具运行TypeScript ESLint来检查你的代码。例如,你可以运行以下命令来检查整个项目: ``` npx eslint . ``` 你也可以将该命令添加到你的构建脚本中,以确保在每次构建时都进行代码检查。 通过使用TypeScript ESLint,你可以在编写代码时及时发现问题,提高代码质量和可维护性。它还支持与编辑器集成,例如通过VS Code的ESLint插件实时检查代码并提供修复建议。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值