---

---

【TypeScript】VSCodeでESLintによる自動フォーマット設定

投稿日：2020年11月28日

ESLintはコードを検証、フォーマットするパッケージです。コードに明らかな問題がある場合や、コードスタイルと異なる書き方について、指摘・修正をしてくれます。この記事ではTypeScriptのプロジェクトにおけるESLintのインストール・設定方法・使い方、VSCodeの拡張機能について解説しています。

---

はじめに

この記事について

ESLintとは

---

実践

$ mkdir eslint_ts # プロジェクトのディレクトリを作成
$ cd eslint_ts
$ npm init # 全てデフォルト値を選択

$ npm install --save-dev typescript eslint

$npx eslint --init

dist
node_modules

eslintコマンド

const a=10
console.log(a)

$ npx eslint *.ts
npm WARN lifecycle The node binary used for scripts is /snap/bin/node but npm is using /snap/node/3292/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> eslint_ts@1.0.0 eslint /home/ogihara/ts/eslint_ts
> eslint "index.ts"


/home/ogihara/ts/eslint_ts/index.ts
  1:11  error  Missing semicolon                              semi
  2:15  error  Newline required at end of file but not found  eol-last
  2:15  error  Missing semicolon                              semi

✖ 3 problems (3 errors, 0 warnings)
  3 errors and 0 warnings potentially fixable with the `--fix` option.

$ npx eslint -- --fix
npm WARN lifecycle The node binary used for scripts is /snap/bin/node but npm is using /snap/node/3292/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> eslint_ts@1.0.0 eslint /home/ogihara/ts/eslint_ts
> eslint "--fix"

VSCodeの設定

[...]

"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

[...]

---

---

---