Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ESLint使ってますか?
Search
biwakonbu
August 18, 2023
Technology
0
64
ESLint使ってますか?
ESLint を使っていない人、良いコードを書きたいけど何をしたら良いのか分からない人に向けて、ESLint で何ができるかを説明します。
biwakonbu
August 18, 2023
Tweet
Share
More Decks by biwakonbu
See All by biwakonbu
爆速なPythonフレームワーク
biwakonbu
0
51
HTMX触ってみた
biwakonbu
0
48
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
180
プログラミングを体系的に学べる言語 Python を推したい
biwakonbu
0
63
プログラミング言語F#を学びはじめました
biwakonbu
0
67
開発の生産性を高める事を考える
biwakonbu
0
73
「プログラミングを習得する」を考えてみた
biwakonbu
0
42
Python の型事情について
biwakonbu
0
48
TypeScript で型を扱う観点から React と Vue3 を比較
biwakonbu
0
440
Other Decks in Technology
See All in Technology
Dungeons and Dragons and Rails
joelq
0
220
Domain-driven Design: A Complete Example
ewolff
2
230
PHP 9 に備えよ - 動的プロパティ、どうすればいぃ?
taisukearase
0
150
kcp: Kubernetes APIs Are All You Need #techfeed_live / TechFeed Experts Night 28th
ytaka23
1
180
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
10
1.7k
NewSQL Landscape
oracle4engineer
PRO
5
3.2k
ハードウェアを動かすTypeScriptの世界
9wick
3
1.1k
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
1
320
データ分析力を高めるSQL研修サービス『SQL Everyone』
hikarut
1
370
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.7k
エンジニアゼロの組織から内製開発の DX をどう実現したのか / How did we achieve DX in in-house development in an organization with zero engineers?
genkiogasawara
5
1.7k
個人のAWSアカウントをマルチ運用してみた
miura55
2
290
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
What the flash - Photography Introduction
edds
64
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Teambox: Starting and Learning
jrom
128
8.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
Navigating Team Friction
lara
179
13k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Transcript
ESLint 使ってますか? 株式会社coroutine 東川 諒央
自己紹介 1 ルールとか何も考えたくない 3 名前にこだわりたい 4 ESLint とは? 2 5
まとめ
自己紹介 1 株式会社 coroutine 東川 諒央 @biwakonbu 大学教員 ゲームバックエンド フリーランス
経歴 Go Python JavaScript 実績言語 Ruby 技術顧問 エンジニア教育 業務 設計 プログラミング インフラ etc… Rust Haskell TypeScript 学習中言語
> ESLint とは?
ESLint とは? 2 > ESLintは、ECMAScript/JavaScriptの コードに見られるパターンを特定し、報告す るためのツールで、コードの一貫性を高 め、バグを回避することを目的としていま す。
ESLint とは? 2 ❏ TypeScript だけでは駄目なの? ❏ TS は型による論理的な動作保証が仕事 ❏
ESLint はコーディングルールを守れているかを検証するのが仕事 ❏ 良くある使用例 ❏ モジュールの import を制限 ❏ src/A.ts module が src/B.ts module を import できなくするなど ❏ 未使用の変数やモジュールなどを検出 ❏ 命名規則を守らないものを検出 ❏ JS で推奨されない記法の制限 ❏ == を検出し、=== を許可するなど
ESLint とは? 2 ・console.log の制限 ・シングルクォートの使用を強制
ESLint とは? 2
> ルールとか何も考えたくない
ルールとか何も考えたくない 3 ❏ 最初からルールを考えすぎると大変なので、何をやられたくないかを検討 ❏ 例 ❏ 意味なく let を使わないで欲しい
(var は絶許) ❏ 代入より前に利用して欲しくない ❏ セミコロンを省略したくない ❏ ケツカンマ問題で悩みたくない (全部にカンマを入れて欲しい) ❏ TypeScript のコードに ESLint を効かせたい ❏ etc, …
ルールとか何も考えたくない 3 ❏ 本当に何もしたくないけど PJ に一旦導入したい場合 ❏ “eslint:recommended” を使いましょう ❏
ESLint が推奨する最低限のリントが適応されます ❏ カスタマイズしたい場合は公式ドキュメント参照 ❏ TypeScript でも推奨のリント設定を使いたい場合は下記を使いましょう ❏ “plugin:@typescript-eslint/recommend” ❏ “plugin:@typescript-eslint/recommended-requiring-type-checking” ❏ typescript-eslint という別パッケージを入れる必要があるので注意 ❏ 上記コンフィグも typescript-eslint のドキュメントにて言及されています ❏ 厳格なチェックは recommended を strict に変えて使いましょう ❏ typescript-eslint v6 で設定内容に影響がでる変更がありました ※注意
> 名前にこだわりたい
名前にこだわりたい 4 ❏ naming-convention を使う事で色々できます ❏ 変数名は camelCase か UPPER_CASE
にしたい ❏ rures に下記を指定 ❏ const 変数は format を camelCase or UPPER_CASE にする
名前にこだわりたい 4 ❏ 変数名は camelCase か UPPER_CASE にしたい ❏ rures
に下記を指定 ❏ const 変数は format を camelCase or UPPER_CASE にする
名前にこだわりたい 4 ❏ boolean の変数や関数名に prefix を指定したい ❏ types を指定する事で特定の型での名前を限定できる
❏ prefix を指定する事で特定の名前が頭に付く事を指定できる (suffix もある) ❏ prefix, suffix の際合致する名前がトリミングされるため、 prefix の場合の変数 名は camelCase を指定してても PascalCase にする必要がる
名前にこだわりたい 4 ❏ boolean の変数や関数名に prefix を指定したい ❏ types を指定する事で特定の型での名前を限定できる
❏ prefix を指定する事で特定の名前が頭に付く事を指定できる (suffix もある) ❏ prefix, suffix の際合致する名前がトリミングされるため、 prefix の場合の変数 名は camelCase を指定してても PascalCase にする必要がる
まとめ 6 ❏ ESLint を導入する事でプロジェクト全体の品質を維持しやすくなる ❏ コーディングスタイルも非推奨の書き方もなるべく指摘したくない ❏ ただ、リントが強すぎると不便にもなりえるので最初は recommended
で ❏ 他で使われている ESLint がまとめられているので参考にすると良いかも ❏ dustinspecker/awesome-eslint とかを見ると情報が沢山まとまってます ❏ textlint という Markdown ファイルの自然言語向けのものもあります ❏ ドキュメント作りの時の用語のブレとかを検出できます ❏ Docuzaurus とかでドキュメントサイトを作る際に便利 ❏ eslint の plugin で色々やれそうなのでちょっと自分でも作ってみたさがありました ❏ 開発する時に使っていい用語集とか欲しいですね ❏ 標準のものでもある程度は頑張れそうですが、個人的にはちょっと不足かな ...
おわり
P.S. エンジニアのための学習・交流を行うコミュニティスペースを作ります 未経験者・学生・社会人・フリーランス歓迎、プログラミング等は教えます 色々なご相談にも対応します ・就活・キャリアアップ相談 ・業務に関する相談 ・個人的な学習の相談 大阪でのエンジニアコミュニティを応援します ・勉強会場として無料で場所貸し ・むしろ開催応援のギフト券なども考えています
・長く続く開発者コミュニティ作りを実行します