TypeScript

開発環境

  • VSCode: 1.73.1
  • typescript: 4.9.3
  • eslint: 8.29.0
  • @typescript-eslint/eslint-plugin: 5.45.0
  • @typescript-eslint/parser: 5.45.0
  • prettier: 2.8.0
  • eslint-config-prettier: 8.5.0

フォルダを作る

$ mkdir TypeScript
$ cd TypeScript

TypeScriptとESLintのインストール

$ npm i --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
$ npx tsc --init
$ npx eslint --init

下記の項目を除き、デフォルトで初期化。

  • Which framework does your project use ?
    React → Vue.js
  • Does your project use TypeScript ?
    No → Yes

Prettierのインストール

$ npm install --save-dev prettier
$ npm install --save-dev eslint-config-prettier

【.eslintrc.js】

“extends”の最後に”prettier”を追記

"extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
        "prettier",
    ],

【.prettierrc.js】(なければ作る)

module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: true,
  singleQuote: true,
};

動作確認

【index.ts】

let text = "Hello, world"
$ npx eslint index.ts
 1:5  warning  'text' is assigned a value but never used        @typescript-eslint/no-unused-vars
 1:5  error    'text' is never reassigned. Use 'const' instead  prefer-const

✖ 2 problems (1 error, 1 warning)
$ npx prettier  index.ts
let text = 'Hello, world';

VSCode

拡張機能追加

  • ESLint
  • Prettier

設定

ファイル/ユーザ設定/設定

【settings.json】

{
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode" // フォーマッタをprettierに指定
    },
    "editor.formatOnSave": true, // ファイル保存時にPrettierでフォーマット
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // ファイル保存時にESLintでフォーマット
    }
}

注意! 既に、記述がある場合

記述の最後に「,」を追加して”[typescript]”の記述を追加する。一番外の{}は省略。

動作確認

index.tsを再保存する。コードが修正される。

const text = 'Hello, world';

バージョン確認

$ npm list --depth=0
タイトルとURLをコピーしました