VSCode 使用 ESLint-TypeScript

插件

安装 VSCode 内置插件：ESLint。

为了让插件检查 typescript 的语法。

// 在 setting.json 中设置
{
  "eslint.validate": ["typescript"]
}

但发现 ESLint 并没有 work。

安装 eslint

插件不生效的原因是系统环境没有安装 eslint 的依赖。

# 全局安装
# using npm
npm install -g eslint
# using yarn
yarn global add eslint

# 项目中安装
# Go to the root of the project (where package.json lives)
cd my-project
# using npm
npm install -D eslint
# using yarn
yarn add -D eslint

安装 typescript-eslint

为了让 eslint 知道 typescript 的语法，安装其依赖包。

# using npm
npm i -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
# using yarn
yarn add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

.eslintrc

在项目根目录下创建文件 .eslintrc，用来写入语法规则。

eslint 配置项： https://openbase.io/js/eslint-config-fornode/documentation

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "semi": ["error", "always"], // 语句末尾使用分号
    "quotes": [2, "single"] // 只能使用单引号
  },
  "parserOptions": {
      "sourceType": "module"
  }
}

问题

parsing error: Keyword “import” is reserved

解决

https://discuss.atom.io/t/eslint-parsing-error-keyword-import-is-reserved/31704/5

npm install [email protected] babel-eslint@8 --save-dev

参考文章

https://thesoreon.com/blog/how-to-set-up-eslint-with-typescript-in-vs-code