如何让IntelliJ IDEA对.vue文件中的TS脚本进行lint检查？

我之前也碰到过一模一样的问题！核心就是得让TSLint能识别.vue文件里的TypeScript代码，同时让IDE知道要用TSLint来校验.vue里的<script lang="ts">部分。下面是一步步的解决方法：

• 第一步：安装TSLint的Vue专属插件
  首先得装tslint-plugin-vue，这个插件就是用来让TSLint能处理Vue文件里的TS代码块的。执行下面的命令就行：

  npm install tslint-plugin-vue --save-dev
  # 用yarn的话就跑这个
  yarn add tslint-plugin-vue -D
  

• 第二步：调整tslint.json配置
  打开项目根目录的tslint.json，让它扩展vue插件的规则集，同时确保你需要的格式规则（比如引号类型）已经正确开启：

  {
    "extends": [
      "tslint:recommended",
      "tslint-plugin-vue" // 加入这个扩展，让TSLint支持Vue文件
    ],
    "rules": {
      // 比如你要求用单引号，就开这个规则
      "quotemark": [true, "single", "avoid-escape"],
      // 针对Vue文件的引号规则也可以单独配置（可选）
      "vue/quotemark": [true, "single"]
    },
    "linterOptions": {
      // 明确告诉TSLint要检查.ts和.vue两种文件
      "extensions": [".ts", ".vue"]
    }
  }
  

• 第三步：配置IDE（以VS Code为例）
  如果你用VS Code，得确保Vetur插件（Vue开发必备）把Vue文件的script校验交给TSLint：

  1. 按Ctrl+,打开设置面板，搜索vetur.validation.script
  2. 把选项改成tslint（默认可能是eslint或者none）
  3. 也可以直接在settings.json里手动加配置：

     {
       "vetur.validation.script": "tslint",
       // 如果需要格式化也配合TSLint，可选添加这行
       "vetur.format.scriptFormatter": "prettier-tslint"
     }
     

• 第四步：验证效果
  现在回到你的Example.vue文件，把import Component from "vue-class-component";里的双引号改回单引号再改回去，IDE应该立刻弹出TSLint的报错提示，说明规则生效了。也可以在终端跑lint命令批量检查所有文件：

  npx tslint -p tsconfig.json 'src/**/*.{ts,vue}'
  

这样就能让TSLint在.vue和.ts文件里保持一致的校验规则啦～

内容的提问来源于stack exchange，提问作者Ábel Énekes