vue + ts tslint.json配置

{
  "defaultSeverity": "warning",
  "extends": [
    "tslint:recommended"
  ],
  "linterOptions": {
    "exclude": [
      "node_modules/**"
    ]
  },
  "rules": {
    // 禁止自动检测末尾行必须使用逗号,always总是检测,never从不检测,ignore忽略检测
    "trailing-comma": [true, {
      "singleline": "never",
      "multiline": {
        "objects": "ignore",
        "arrays": "ignore",
        "functions": "ignore",
        "typeLiterals": "ignore"
      }
    }],
//    "no-string-literal": false,
    // 禁止出现空代码块,允许 catch 是空代码块
    "no-empty":false,
    // 类型断言必须使用 as Type,禁止使用 <Type>
    // <Type> 容易被理解为 jsx
    "no-angle-bracket-type-assertion": false,
    // 禁止行尾有空格
    "no-trailing-whitespace": true,
    // 强制单行注释格式:'//' 后必跟空格
    "comment-format": [true, "check-space"],
    // 任何情况下,if / for / do / while 后必须通过 {} 包裹代码块
    "curly": true,
    // 使用制表符或空格强制缩进。
    "indent": false,
    // 要求将import语句按字母顺序排列并进行分组。
    "ordered-imports": false,
    // 不允许使用console
    "no-console": false,
    // 不允许使用debugger
    "no-debugger": false,
    // 箭头函数定义的参数需要括号
    "arrow-parens": false,
    // 接口名要求大写开头
    "interface-name": false,
    //不允许使用null关键字
    "no-null-keyword": false,
    // 不允许连续出现一个或多个空行。
    "no-consecutive-blank-lines": false,
    // 检查对象文字中键的排序。
    "object-literal-sort-keys": false,
    // // 字符串文字需要单引号或双引号。
    "quotemark": false,
    // 行尾必须有分号
    "semicolon": false
  }
}

Vue 项目中使用 TypeScript,可以通过配置 TSLint 来进行代码规范和类型检查。以下是一些设置 TSLint 的经验总结: 1. 安装依赖 ``` npm install --save-dev tslint tslint-config-prettier tslint-plugin-prettier tslint-eslint-rules typescript ``` 2. 配置 TSLint 在项目根目录下创建 tslint.json 文件,并添加以下内容: ``` { "extends": [ "tslint:recommended", "tslint-config-prettier" ], "rules": { "interface-name": false, "no-console": false, "no-empty": false, "no-unused-expression": false, "no-unused-variable": false, "semicolon": [true, "always"] }, "linterOptions": { "exclude": [ "node_modules/**", "dist/**" ] } } ``` 以上配置文件的含义: - extends:继承的规则,包含了 TSLint 推荐的规则和 Prettier 的规则。 - rules:自定义的规则,可以根据团队的需求进行配置。 - linterOptions:指定需要忽略的文件或目录。 3. 配置 VS Code 在 VS Code 中安装以下插件: - TSLint - Prettier - Code formatter 然后在项目根目录下创建 .prettierrc 文件,并添加以下内容: ``` { "singleQuote": true, "trailingComma": "es5", "semi": true, "tabWidth": 2 } ``` 最后,在 VS Code 的设置中添加以下配置: ``` { "editor.formatOnSave": true, "vetur.validation.template": false, "prettier.eslintIntegration": true, "eslint.validate": [ "javascript", "javascriptreact", "vue", "typescript" ], "typescript.validate.enable": false, "tslint.enable": true } ``` 以上配置的含义: - editor.formatOnSave:在保存时自动格式化代码。 - vetur.validation.template:禁止 Vetur 对模板的验证,因为它可能与 TSLint 发生冲突。 - prettier.eslintIntegration:启用 Prettier 和 ESLint 的集成。 - eslint.validate:指定需要验证的文件类型。 - typescript.validate.enable:禁止 VS Code 内置的 TypeScript 验证器,因为它可能与 TSLint 发生冲突。 - tslint.enable:启用 TSLint 验证器。 4. 迁移经验 如果是一个已经存在的 Vue 项目,需要将 JavaScript 代码迁移到 TypeScript,可以按照以下步骤进行: - 安装 TypeScript 和 @types/node - 将 .js 文件改名为 .ts 文件,并修改文件中的代码 - 在 Vue 组件中添加 <script lang="ts"> 标签,并将代码移到其中 - 逐步修改代码,添加类型注解和接口定义 需要注意的是,迁移过程中可能会遇到一些问题,例如: - 无法识别某些模块,需要在 tsconfig.json配置 paths - 需要安装额外的类型声明文件,例如 @types/vue、@types/lodash 等 - 一些 JavaScript 的语法不支持 TypeScript,需要进行调整 总之,迁移过程需要耐心和谨慎,可以先从一些简单的模块开始,逐步迁移。同时,使用 TSLint 和 VS Code 可以帮助我们更方便地进行代码规范和类型检查。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜丶陌颜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值