コードフォーマッターとしての Prettier （プリティア）をプロジェクトに組み込む方法を紹介。
また、2021 年に静的検証ツールとしての ESLintがPrettierが merge され、今までは別々にインストールする必要があったが、 Prettier のみインストールすればよくなった。
“prettier/@typescript-eslint” has been merged into “prettier” in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
Prettier
インストール方法は以下の通り
npm install -D prettier eslint-config-prettier eslint-plugin-prettier
npm init @eslint/config
Ok to proceed? (y) y
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:
@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes
Installing @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest
removed 7 packages, and audited 858 packages in 4s
47 packages are looking for funding
run `npm fund` for details
1 critical severity vulnerability
To address all issues, run:
npm audit fix
Run `npm audit` for details.
A config file was generated, but the config file itself may not follow your linting rules.
Successfully created .eslintrc.js file in /Users/sumito.tsukada/go/src/git.rarejob.com/rarejob-platform/account-web/aws/rjpf-student-account-web-alb-ecsc-ecr-cdeploy
プロジェクト直下に js を配置
vi .prettierrc.js
module.exports = {
singleQuote: true,
tabWidth: 4,
trailingComma: 'es5',
};
package.json を一部修正
"build": "tsc",
"watch": "tsc -w",
"test": "jest",
- "cdk": "cdk"
+ "cdk": "cdk",
+ "lint": "eslint --ext .ts ."
},
"devDependencies": {
"@aws-cdk/assertions": "1.135.0",
警告
npm run lint
> sample@0.1.0 lint
> eslint --ext .ts .
sample.test.ts
1:20 warning 'Match' is defined but never used @typescript-eslint/no-unused-vars
✖ 1 problem (0 errors, 1 warning)