TypeScriptをESLint/prettierで自動整形したいと思ったので、ちょっとググってやってみたので自分の備忘録で投稿させていただきました、あてにしないでください。
参考にしたサイトは以下です。ちゃんとした情報がほしい方は以下のリンクを見てください。
https://ics.media/entry/16329
https://github.com/Microsoft/vscode-eslint/issues/284
フォルダ構成
./
├ dist
├ node_modules
├ src
│ └ main.ts
├ .eslintrc.json
├ index.html
├ package-lock.json
├ package.json
├ tsconfig.json
└ webpack.config.js
準備
package.json
{
"name": "hogehoge",
"version": "1.0.0",
"description": "",
"main": "./src/main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^5.4.0",
"eslint-config-prettier": "^3.0.1",
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-typescript": "^0.12.0",
"prettier": "^1.14.2",
"ts-loader": "^4.5.0",
"typescript": "^3.0.3",
"typescript-eslint-parser": "^18.0.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
}
}
$ npm i
を実行
.eslintrc.json
{
"env":{
"browser": true,
"node":true,
"es6": true
},
"globals": {},
"parser": "typescript-eslint-parser",
"plugins": ["typescript"],
"extends": [
"eslint:recommended",
"plugin:prettier/recommended"
],
"rules": {
"no-undef": "off",
"no-unused-vars":"off",
"no-console":"off",
"prettier/prettier": [
"error",
{
"trailingComma": "es5"
}
]
},
"parserOptions": {
"sourceType": "module"
}
}
tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"module": "es2015"
}
}
webpack.config.js
module.exports = {
mode: "development",
entry: "./src/main.ts",
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader",
},
],
},
resolve: {
extensions: [".ts"],
},
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>
VSCodeの設定
ESLintの拡張機能をインストール
https://github.com/Microsoft/vscode-eslint
macだと⌘ + ,
を押して設定ファイルを開いて、以下を追加する
{
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{"language": "typescript", "autoFix": true },
{"language": "typescriptreact", "autoFix": true }
]
}
./src/main.tsにtypescriptを記述し、⌘ + s
で保存するときに自動で整形してくれました。
※www.typescriptlang.orgからサンプルになりそうなコードをコピー
http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
./src/main.ts
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
ブラウザでも動作確認しておくnpx webpack && open index.html
を実行
最後まで読んでくださり、ありがとうございましたm(_ _)m