vue ts 设置tslint提示_TypeScript+vue使用与迁移经验总结

在 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 可以帮助我们更方便地进行代码规范和类型检查。