開発環境
- 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
