Create Project
- 最新のyarnをインストールします。
npm install -g yarn
- プロジェクトリポジトリに移動します。
- create package.json
yarn init
- パッケージの追加。
yarn add --dev typescript ts-node @types/node
- create tsconfig.json
yarn tsc --init
Linter導入
- ESLint install
yarn add --dev eslint
yarn eslint --init
コマンドで対話式で構成ファイル作成
- How would you like to use ESLint?
To check syntax and find problems
- What type of modules does your project use?
JavaScript modules (import/export)
- Which framework does your project use?
None of these
- Does your project use TypeScript?
Yes
- Where does your code run?
Browser
√ Node
- How would you like to define a style for your project?
To check syntax, find problems, and enforce code style
- Which style guide do you want to follow?
Airbnb: https://github.com/airbnb/javascript
- What format do you want your config file to be in?
JSON
- Would you like to install them now with npm?
Yes
- eslintの設定ファイルが生成されます
Prettier 導入&実行
- Prettier install
yarn add --dev prettier eslint-config-prettier prettier-plugin-organize-imports
- .eslint.jsにPrettierの項目を追加する
module.exports = {
/* 中略 */
extends: [
/* 中略 */
"prettier", // 追加。他の設定の上書きを行うために、必ず最後に配置する。
],
};
- Prettier 設定ファイル作成 フォーマット設定はここに記述
touch .prettierrc.json
.prettierrc.json
に下記を追記
{
"trailingComma": "es5",
"printWidth": 120,
"singleQuote": true,
"tabWidth": 2,
"semi": true,
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "lf",
"plugins": ["prettier-plugin-organize-imports"]
}
- prettierの対象外になるファイルを設定する
.prettierignore
を作成
touch .prettierignore
ファイル記述例
# Ignore artifacts:
node_modules
package.json
yarn.lock
tsconfig.json
.eslintrc.json
package.json
scriptに実行コマンドをまとめる
"format": "prettier --write src/**/*.{js,ts,json}",
"lint": "eslint src/**/*.ts",
"lint:fix": "yarn run format && yarn run lint"
hot reload
tsc --watch
とnodemon
を組み合わせる
nodemon.json
ファイルを作成し、下記の設定を追記する
{
"watch": ["build"],
"ext": "js",
"ignore": [""],
"delay": "1000",
"exec": "node build/app.js"
}
- package,jsonにコマンドを追加する
"build": "tsc --watch",
"watch": "nodemon",
- buildとwatchを両方実行する