皆さんこんにちは！
つい３週間ほど前から記事を毎日書いているのですが、日々サイト制作を行っていると意外とネタが尽きないものです。
さぁ！今回は特に説明とかは無く、最近Typescriptの勉強を始めたのでプロジェクト作成手順の備忘録を書いていきたいと思います。細かいオプションなどの設定は行っていないので、そこはご了承ください。
また、実際にどのようなエラーが起きたかなども記載していくので、同じエラーにぶつかった方の参考にもなればいいなと思うので、ぜひ学習の参考にして頂くと幸いです。
それでは一緒に作成手順を見ていきましょう！
ちなみに開発環境は以下のようになります。（windowsでの開発となります）
node -v v14.15.1
npm -v 6.14.9
tsc -v Version 4.1.3
ver Microsoft Windows [Version 10.0.17763.1637]
１.開発環境を整える###
ディレクトリの作成#
適当な名前をつけて開発用のディレクトリを作成します。
md initialTypescript
cd initialTypescript
npmの初期化#
npm init
色々オプションなどが出てくると思うのですが、とりあえずは全部Enterキーを押してください。
パッケージのインストール#
ローカル環境だけ（--save-dev）にインストールします。
npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server
webpack.config.jsの作成・設定#
プロジェクトの直下に作ります。
copy nul webpack.config.js
const path = require("path");
module.exports = {
entry: {
bundle: "./src/index.ts"
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].js" //bundle.jsになる
},
resolve: {
extensions: [".ts", ".js"]
},
devServer: {
contentBase: path.join(__dirname, "dist"),
open: true,
port:8081
},
module: {
rules: [
{
loader: "ts-loader",
test: /\.ts$/
}
]
}
}
tscconfig.jsonの作成#
プロジェクトの直下に作ります。
tsc --init
ここで、tscコマンドが使えない場合はもう一度インストールして見て下さい。
２.ESLint、Prettierの環境構築###
パッケージのインストール#
npm install --save-dev eslint eslint-config-prettier prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin
.prettierrcの作成・設定#
プロジェクトの直下に作ります。
copy nul .prettierrc
{
"printWidth": 120, //折り返し文字
"tabWidth": 2, //Tabキーでスペース何個分か
"singleQuote": true, //シングルクォーテーションとダブルクォーテーションの区別
"semi": false //末尾のセミコロン
}
.eslintrc.jsの作成・設定#
プロジェクトの直下に作ります
copy nul .eslintrc.js
module.exports = {
env: {
browser: true,
es6: true
},
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended", // TypeScriptでチェックされる項目をLintから除外する設定
"prettier", // prettierのextendsは他のextendsより後に記述する
"prettier/@typescript-eslint",
],
plugins: ["@typescript-eslint"],
parser: "@typescript-eslint/parser",
parserOptions: {
"sourceType": "module",
"project": "./tsconfig.json" // TypeScriptのLint時に参照するconfigファイルを指定
},
root: true, // 上位ディレクトリにあるeslintrcを読み込まないようにする
rules: {}
}
package.jsonの設定#
プロジェクト直下にあるpackage.jsonを開いてください。
そして、scriptsを以下のように設定してください。
"scripts": {
"build": "webpack --mode=production",
"start": "webpack-cli serve --mode=development",
"lint": "eslint --fix 'src/**/*.{js,ts}'",
"lint-fix": "eslint --fix src/**/*.{js,ts} && prettier --write ./src/**/*.{js,ts}"
}
No files matching the pattern "'src/**/*.{js,ts}'" were found. Please check for typing mistakes in the pattern.
このようなエラーが出た方は、個人の開発環境によって'src/**/*.{js,ts}'シングルクォーテーションで囲まないとエラーが出る可能性もあるので、エラーが出た際にはシングルクォーテーションで囲ってください。
ESLint、Prettierの動作#
package.jsonで設定したbuild,start,lint,lint-fixはnpm runの後に記述すると実行できます。
それぞれの例を挙げていきます
npm run lint
> eslint --fix src/**/*.{js,ts}
ESLintの適用です。
npm run lint-fix
> eslint --fix src/**/*.{js,ts} && prettier --write ./src/**/*.{js,ts}
src\index.ts 392ms
src\world.ts 16ms
ESLintとPrettierの適用です。
npm run build
> webpack --mode=production
asset bundle.js 458 bytes [compared for emit] [minimized] (name: bundle)
./src/index.ts 233 bytes [built] [code generated]
./src/world.ts 401 bytes [built] [code generated]
webpack 5.11.1 compiled successfully in 3873 ms
distディレクトリにbundle.jsが作成されます。もし、distディレクトリに作成されない場合はwebpack.config.jsonの設定に誤りがないか確認してください。
npm run start
> webpack-cli serve --mode=development
～
webpack 5.11.1 compiled successfully in 5501 ms
i ｢wdm｣: Compiled successfully.
ローカルホストの立ち上げです。
いかがだったでしょうか？
長いですよね。。。
Typescriptの環境を作るたびにいろんなサイトを見るのは正直時間の無駄なので、一貫性を持ってやるのが良いかと。
なので、ぜひ良かったらストックして開発する時に見ながらやってください！！！
以上、「保存用！！Typescriptファイル作成、ESLint、Prettier設定備忘録」でした！！！
良ければ、LGTM、コメントお願いします。
また、何か間違っていることがあればご指摘頂けると幸いです。
他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！
Thank you for reading