Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@arx8

【2020冬】 TypeScript + Prettier + ESLint + VSCode の設定

概要

TL;DR

src: https://github.com/arx-8/try-separate-eslint-and-prettier/commit/0d0f92201ca2102f20893b26fd23a902621aba41

やったこと

VSCode からフォーマッタを実行

  • 以下の通り移行。
    • prev: 拡張機能 dbaeumer.vscode-eslint + .eslintrc.js
    • next: 拡張機能 esbenp.prettier-vscode + .prettierrc
  • 設定周りについて。
    • esbenp.prettier-vscode の設定値 prettier.prettierPath で、プロジェクトに install した prettier を使うようにする。
    • 設定値 editor.defaultFormatter にフォーマッタとして拡張機能 esbenp.prettier-vscode を指定したので、設定値 editor.formatOn* で prettier を実行できるようになった。

非 VSCode 民でも npm script からフォーマッタを実行

  • prettier --write . を使う。

CI でフォーマッタ未適用コードをエラーにする

  • prettier --check . を使う。

おまけ: ESLint + Prettier で全部 sort する

TL;DR

sort 対象と package 名

sort 対象 package 名
import 文 prettier-plugin-import-sort + import-sort-style-module
Object のキー eslint-plugin-sort-keys-fix
Object destructuring assignment のキー eslint-plugin-sort-destructure-keys
type/interface 宣言のキー eslint-plugin-typescript-sort-keys
  • これで「リーダブルなキーの並び順とは」とか悩む必要がなくなる。
  • eslint-plugin-simple-import-sort ではなく prettier-plugin-import-sort を選択している理由は、prettier との相性のため。 eslint-plugin-simple-import-sort の方は、2 回保存しないと auto fix しきれないケースがある。
    • 恐らく prettier -> eslint の実行順になった場合に、 eslint-plugin-simple-import-sort による prettier 違反コードが生成されてしまう。
    • なんだかんだ eslint-plugin-prettier は合理的だったのではと思わんでもない。
  • organizeImports では非 VSCode 民が救われないため、ぜひ prettier-plugin-import-sort がもっと普及してほしい。
6
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
arx8

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?