リンティングとは何ですか?どのように時間を節約できますか?

ソフトウェア開発における最大の課題の1つは時間です。それは私たちが簡単にそれ以上得ることができないものですが、リンティングは私たちが持っている時間を最大限に活用するのに役立ちます。

では、リンティングとは何ですか?

lintまたはlinterは、ソースコードを分析して、プログラミングエラー、バグ、文体エラー、および疑わしい構造にフラグを立てるツールです。//en.wikipedia.org/wiki/Lint(software)

簡単に言えば、リンターは、コードの状態とスタイルのバグや不整合につながる可能性のある問題を見つけることを目的として、プログラムでコードをスキャンするツールです。いくつかはあなたのためにそれらを修正するのを助けることさえできます!

たとえば、次の例を見てください。

const test = 'I am a test'; console.log(`Test: ${test}`); const test = 'Another one.';

定数をtest2回宣言していますが、JavaScriptエンジンはこれに満足していません。適切なリンター設定とウォッチ構成を使用すると、後でコードの実行時にエラーとして検出されるのではなく、バックグラウンドで実行されているリンターを介してすぐにエラーが発生します。

 10:9 error Parsing error: Identifier 'test' has already been declared 8 | const test = 'I am a test'; 9 | console.log(`Test: ${2}`); > 10 | const test = 'Another one.'; | ^

これがconst3行しかないことを考えると、同じ宣言が2つあることは明らかかもしれませんが、より複雑なアプリケーションでは、これにより、必ずしも明白ではない厄介なバグを探す時間を大幅に節約できます。

リンティングは何に役立ちますか?

以下を含むがこれらに限定されない多くのもの:

  • 構文エラーからコードのバグにフラグを立てる
  • コードが直感的でない可能性がある場合に警告を表示する
  • 一般的なベストプラクティスの提案を提供する
  • TODOとFIXMEを追跡する
  • 一貫したコードスタイルを維持する

考えられるほとんどのことは、おそらくすでに何らかの形で存在しています。そうでない場合は、ニーズに合ったカスタムルールを作成することもできます。

これは実際にどのように役立ちますか、またはなぜ私は気にする必要がありますか?

おそらく、上記のリストの最大の重要なテーマは、これらの問題がすぐに呼び出されるという事実です。アプリの実行中にこれらの問題が発生したり、コードレビュー中に誰かに不安を与えたりすることはもうありません。JSステートメントの最後にセミコロンを含めるかどうかについてのコメントを通じて、あなたとあなたのレビューアが際限なく受動的に戦うことはもうありません(あなたはそうすべきですか?)。

ばかげた構文エラーや、レビュー中にあなたとあなたのチームメートが持っているマイクロインタラクションのためにあなたが生産的になるのを妨げるこれらの瞬間はすべて時間がかかります。それらは合計され、別のバグの修正や製品の次の優れた機能の開発に費やすことができる時間を奪うことになります。

では、実際にどのように始めればよいのでしょうか。

この投稿では、他の主流言語のすべてではないにしてもほとんどのリンターがありますが、ここではJavascriptに焦点を当てます。同じ原則が適用されますが、ツールが少し異なる場合があります。

Reactアプリで基本的なリンティングを設定する方法を説明します。独自のReactアプリを起動するか、Gatsbyスターターを使用することで簡単にフォローできます://github.com/colbyfayock/gatsby-starter-sass#starting-from-scratch

あなたのリンター

開始するには、最初にリンターが必要です。おそらくJavascriptの世界で最も人気のあるのはESLintです。リンターは、実際には、ルールを定義し、テストするファイルを解析するためのエンジンになります。ESLintは、それ自体がnpmパッケージとして利用可能であり、インストールすると、箱から出して、基本的な構成ファイルをセットアップし、いくつかのコマンドラインツールを使用して実行を開始できます。

まず、ESLint依存関係を追加しましょう。

yarn add eslint -D

これはアプリケーションで実行する必要のあるものではないため、これをdevDependency(したがって-Dフラグ)としてインストールします。正常にインストールされたらpackage.json、スクリプトとして追加しましょう。

... "scripts": { ... "lint": "eslint . --ext .js" ... }, ...

上記では、拡張子が.js。のファイルのプロジェクトディレクトリ全体でリンターを実行しています。多くのファイルタイプを含む大規模なプロジェクトで作業している場合は、リントしたくないものもあるかもしれませんが、そのフラグを変更するか、他のオプションでより具体的にすることができます。

ESLintをサポートするには、もう1つ行う必要があります。プロジェクトのルート(おそらくあなたpackage.jsonがいる場所)にファイルを追加して、ファイル.eslintrc.jsの内容を単純に作成しましょう。

module.exports = {};

準備ができたら、実行yarn lintして…エラーを取得できます。

これは問題なく、私たちのプロジェクトで期待されているので、次に進みましょう。

あなたのパーサー

A common tool in the chain for Javascript developers is Babel, which allows you to write code with features that may not be supported in all browsers, such as using arrow functions, that are available in ES6, and other conventions like importing files via import.

The code you write may already run through Babel to work in a browser, but that doesn’t apply to ESLint by default, so ESLint allows you to specify a parser that allows the linting processing to look at the same code as your browser sees. In this case we’ll want to use Babel’s ESLint parser that’s made available to us.

To set that up, we’ll want to first install our dependency:

yarn add babel-eslint -D

Typically if you're using babel-eslint you'll want to make sure babel is installed next to it, but in our case, Gatsby already uses babel, so we don’t necessarily need to add it. After that’s set up, we’ll want to update our .eslintrc.js config file with some new options:

module.exports = { "env": { "browser": true, "node": true, "es6": true }, "parser": "babel-eslint" };

Here, we’re letting ESLint know that our environment will be run in node (Gatsby’s precompiling), inside the browser (the app), and it will use ES6. This helps ESLint know how to run your code. Additionally, we want to set up our parser to be babel-eslint.

Once we’re ready to go, run yarn lint again and… well nothing really happened.

This is still expected, as we don’t have any rules set up!

Plugins for your code

Writing a React app? The Babel parser may help you transform your code, but you might have a hard time being productive, as ESLint needs to understand how it should work to lint your React files.

Part of the beauty of ESLint is that it allows you to configure plugins that have the opportunity to create and set rules for you. Luckily, along with our Babel parser above that does some of the heavy lifting, we have a React plugin available that does just that and takes care of linting the JSX for us.

Let’s first install our dependency:

yarn add eslint-plugin-react -D

Further, let’s update our .eslintrc.js file again:

module.exports = { "settings": { "react": { "version": "detect" } }, "env": { "browser": true, "node": true, "es6": true }, "plugins": [ "react" ], "parser": "babel-eslint" };

What we’re adding here is a setting that automatically detects what React version you’re using, which is helpful to let your linting get parsed properly, and then set up our react plugin that we installed above.

For one last final time, we will run our lint script and get nothing:

Rules defined by others’s opinions

If you’re not really sure where to get started or just want to quickly get up and running, it’s recommend that you enable ESLint’s own recommended rules. Let’s add this to our .eslintrc.js config file:

module.exports = { "settings": { "react": { "version": "detect" } }, "env": { "browser": true, "node": true, "es6": true }, "plugins": [ "react" ], "extends": [ "eslint:recommended" ], "parser": "babel-eslint" };

And let’s run our yarn lint.

Woah! This will immediately give you a lot errors, it seems like something’s wrong.

Since we’re running a React app, we also want to make sure our linter understands the rules it should follow, so let’s also add our React plugin to the .eslintrc.js config setup:

 "extends": [ "eslint:recommended", "plugin:react/recommended" ],

Now if you run yarn lint, you get something a little more logical.

If you’re following along, it looks like our starter app had a misplaced semicolon and a missing prop in our propTypes validation for Layout.js. Writing this helped me fix my own repo! ?

Going further, if those don’t seem to fit your needs, lots of developers and teams have published their own configurations that ESLint allows you to easily tap into.

Some popular ones include:

  • Airbnb’s config
  • Semistandard
  • Google’s JS Style Guide

Not happy with the options available? You can even create and publish your own to either layer on top of others as a starting point or give it a go from scratch.

Let it do the work (most of it)

You don’t think I’m going to make you fix all of those thing yourself do you? Well, you may have to fix some, but let’s try to get ESLint to fix some of it for us.

If you noticed after we ran the command above, ESLint gave us an extra message:

So let’s give it a try! Let’s run:

yarn lint --fix

And what do you know, it now only gives us 1 linting error.

Turns out ESLint was able to fix our semicolon issue automatically, but we’ll still have to add pageName to our Layout’s propTypes manually, not too much of a lift.

Running one more time and finally nothing again! But this time because everything's looking good.

Go forth and write messy code!

Kidding ? The good news here, is now you can easily take a look at the general health of your codebase as well as hopefully fix most of it automatically. This is going to save a lot of headaches as you work with others on your team, and generally, it’s nice to have all of your code neat and tidy.

This post is just getting started. ESLint is a wide open book with tons of plugins and rules, and it’s not the only linting tool in the game. Play around and find what fits best for you and your team. The little time spent configuring it to your app will save you lots more time in the long run.

Other linting tools to check out

  • JSHint: an alternative to ESLint
  • Stylelint: a linting tool for CSS and CSS-like syntaxes like Sass
  • Awesome ESLint: a simple list of awesome configs, parsers, plugins, and other tools to boost your ESLint game
  • Webhint: linting tool for accessibility, speed, and more website best practices
  • A11y JSX Plugin: ESLint plugin for checking accessibility rules on JSX elements

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ?️ Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter

Originally published at //www.colbyfayock.com/2019/10/what-is-linting-and-how-can-it-save-you-time