As background’s knowledge, in our introduction to the linting tools, we have discussed the most interesting linters and their pros and contras. After such overview we have started deepening into the initial features of ESLint, describing how to get started with the tool and how to lint our first JavaScript file. Hereby, alas, we have faced some\u00a0difficulties in linting a\u00a0JavaScript file because of the default settings of ESLint. This second part of the article explains exactly how to workaround such issue, exploiting the best of ESLint, via\u00a0its customizability.<\/p>\n
Table of Contents<\/h5>\n\n- ESLint – Fully customizable\u00a0code quality checker (part 2)\n
\n- Rule reset and custom configuration<\/li>\n
- ESLint config initialize<\/li>\n
- Live Linting with an IDE<\/li>\n
- Our first custom rule<\/li>\n<\/ul>\n<\/li>\n
- Conclusions<\/li>\n<\/ul>\n
ESLint – Fully customizable\u00a0code quality checker (part 2)<\/h2>\n
In the following sections we will recovery the examples of the first part of the article<\/a> and we will go ahead with the description of ESLint. Firstly we will discuss how to initialize our linting environment, in order to customize ESLint. Then we will discuss how to build our own linting rule’s configuration set. After that, we will introduce a\u00a0linting plugin, with which you can run ESLint “live”, within your IDE. As completion of our discussion we will introduce the building\u00a0of a completely customized linting rule and how to activate it.<\/p>\nRule reset and custom configuration<\/h4>\n
The behavior of ESLint can be controlled via the specification of a config file that can be proper of each single project. This means that, within you project you can specify the way ESLint works and, of course, adjust\u00a0this configuration to fit\u00a0the project itself.<\/p>\n
[As info, ESLint can be configured also via JavaScript comments, directly in your code, but we prefer the config file, since it is a global customization]<\/p>\n
The configuration file, as we can read from the ESLint webpage, can be a JSON or YAML file. This can be in the form of an .eslintrc<\/code> file or an eslintConfig<\/code> field in a package.json<\/code> file, both of which ESLint will look for and read automatically.<\/p>\nThe effect of the configuration file is important. If you place a config in a folder, then ESLint will apply this to each file in the directory and all related subdirectories. But, pay attention, ESLint will always still\u00a0consider its default configuration file! Even\u00a0in presence of a custom one. This means that, if you configure a rule in your custom config file, then it will overwrite the default one. But, if you don\u00b4t mention a rule in your config, and this rule is active in the default, it will be anyway considered and computed.<\/p>\n
If you do not want ESLint to consider the default rules anymore, then you have three\u00a0options.\u00a0The first is to manually edit the global configuration file, toggling each rule that you don’t need. But doing this way you will edit the global behavior of the tool. The second is to use the following command:<\/p>\n
eslint --reset\r\n\/*Set all default rules to off - default: false*\/<\/pre>\nBut, like the first possibility, also this one is a no-return option, and you will be always required to configure ESLint for each occasion.<\/p>\n
Or, in alternative, you can use the following source as boilerplate to setup your own config: ESLint_Rule_Reset<\/a><\/p>\nThis starter configuration file contains the most of the default rules, and it has them already set to “0”, in order to give you\u00a0free hand about what to do in your customization. Just copy it and use it as .eslintrc of your project!<\/p>\n
ESLint config initialize<\/h5>\n
Hence, there are two best ways to start your customized setting in your project. The first is to copy the ESLint resetter file and use it within your project. The second is to write your own from scratch. In this last case, ESLint comes into help with a CLI command that creates the .eslintrc file for you:<\/p>\n
MacBook-Pro-Gianluca:$ eslint --init\r\n? What style of indentation do you use? Spaces\r\n? What quotes do you use for strings? Double\r\n? What line endings do you use? Unix\r\n? Do you require semicolons? Yes\r\n? Are you using ECMAScript 6 features? No\r\n? Where will your code run? Browser\r\n? Do you use JSX? No\r\n? What format do you want your config file to be in? JSON\r\nSuccessfully created .eslintrc file in \/Users\/Desktop\/testtest<\/pre>\nThe –init option prompts you a simple 8-steps wizard with some basilar questions about your usage of JavaScript and ESLint.\u00a0After a simple set of commands you will have your .eslintrc file, which will look like this:<\/p>\n
{\r\n \"rules\": {\r\n \"indent\": [\r\n 2,\r\n 4\r\n ],\r\n \"quotes\": [\r\n 2,\r\n \"double\"\r\n ],\r\n \"linebreak-style\": [\r\n 2,\r\n \"unix\"\r\n ],\r\n \"semi\": [\r\n 2,\r\n \"always\"\r\n ]\r\n },\r\n \"env\": {\r\n \"browser\": true\r\n }\r\n}<\/pre>\nStarting from this basic configuration you can toggle the rules you need and adjust each setting to fit your requirements.<\/p>\n
Live Linting with an IDE<\/h4>\n
As complementary possibility, ESLint is able to run “live” within your editor or IDE, in order to integrate warnings and errors with the standard ones, coming from your program.\u00a0As example of this, we consider the configuration of ESLint with the IntelliJ IDEA IDE.<\/p>\n
We suppose that you have already downloaded NodeJS and the ESLint package via npm. At this point, go to IntelliJ IDEA>Preferences (or, under MacOS, just hit Command+,).<\/p>\n
The preferences panel enables you (up.right)\u00a0to search in the preferences by a keyword: type “eslint”.<\/p>\n
Then you will be prompted to a screen similar to the one below:<\/p>\n
![\"ESlint](\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2015\/06\/2015-06-03-11.29.25-am.png\")
<\/a><\/p>\nNow:<\/p>\n
\n- Enable ESLint as Code Quality tool by toggling the checkbox.<\/li>\n
- Check the path of your NodeJS interpreter (the default should be already configured)<\/li>\n
- Tell IntelliJ where to find the ESLint package: if you downloaded it in the standard npm package folder, than copy the following path (don\u00b4t forget to replace your username):
\/Users\/your-username\/.npm-packages\/lib\/node_modules\/eslint<\/code><\/li>\n- If you want to specify a different configuration file you can either let ESLint looking automatically for the next .eslintrc file or specify one by yourself (this last option is useful when the .eslinrc file is in a path which is not on the road from the actual path to the root)\n
\n- Note that, as already discussed, in either case, the settings in the configuration file will override the ESLint default settings.<\/li>\n<\/ul>\n<\/li>\n
- In the last field you can specify a folder that contains custom rules. Such rules can be project specific and can be included in the ESLint workflow for specific need (more in the next paragraph).<\/li>\n<\/ol>\n
After this configuration, ESLint will start running in your IDE, checking your JavaScript “live”.<\/p>\n
Our first custom rule<\/h4>\n
The most interesting feature of ESLint is, undoubtedly, the possibility to write own rules to validate and correct our code. ESLint comes with a simple and clear set of APIs to let you build your rule within a moment. What is important is just to follow the correct format ESLint understands!<\/p>\n
- \n
- Rule reset and custom configuration<\/li>\n
- ESLint config initialize<\/li>\n
- Live Linting with an IDE<\/li>\n
- Our first custom rule<\/li>\n<\/ul>\n<\/li>\n
- Conclusions<\/li>\n<\/ul>\n
ESLint – Fully customizable\u00a0code quality checker (part 2)<\/h2>\n
In the following sections we will recovery the examples of the first part of the article<\/a> and we will go ahead with the description of ESLint. Firstly we will discuss how to initialize our linting environment, in order to customize ESLint. Then we will discuss how to build our own linting rule’s configuration set. After that, we will introduce a\u00a0linting plugin, with which you can run ESLint “live”, within your IDE. As completion of our discussion we will introduce the building\u00a0of a completely customized linting rule and how to activate it.<\/p>\n
Rule reset and custom configuration<\/h4>\n
The behavior of ESLint can be controlled via the specification of a config file that can be proper of each single project. This means that, within you project you can specify the way ESLint works and, of course, adjust\u00a0this configuration to fit\u00a0the project itself.<\/p>\n
[As info, ESLint can be configured also via JavaScript comments, directly in your code, but we prefer the config file, since it is a global customization]<\/p>\n
The configuration file, as we can read from the ESLint webpage, can be a JSON or YAML file. This can be in the form of an
.eslintrc<\/code> file or aneslintConfig<\/code> field in apackage.json<\/code> file, both of which ESLint will look for and read automatically.<\/p>\nThe effect of the configuration file is important. If you place a config in a folder, then ESLint will apply this to each file in the directory and all related subdirectories. But, pay attention, ESLint will always still\u00a0consider its default configuration file! Even\u00a0in presence of a custom one. This means that, if you configure a rule in your custom config file, then it will overwrite the default one. But, if you don\u00b4t mention a rule in your config, and this rule is active in the default, it will be anyway considered and computed.<\/p>\n
If you do not want ESLint to consider the default rules anymore, then you have three\u00a0options.\u00a0The first is to manually edit the global configuration file, toggling each rule that you don’t need. But doing this way you will edit the global behavior of the tool. The second is to use the following command:<\/p>\n
eslint --reset\r\n\/*Set all default rules to off - default: false*\/<\/pre>\n
But, like the first possibility, also this one is a no-return option, and you will be always required to configure ESLint for each occasion.<\/p>\n
Or, in alternative, you can use the following source as boilerplate to setup your own config: ESLint_Rule_Reset<\/a><\/p>\n
This starter configuration file contains the most of the default rules, and it has them already set to “0”, in order to give you\u00a0free hand about what to do in your customization. Just copy it and use it as .eslintrc of your project!<\/p>\n
ESLint config initialize<\/h5>\n
Hence, there are two best ways to start your customized setting in your project. The first is to copy the ESLint resetter file and use it within your project. The second is to write your own from scratch. In this last case, ESLint comes into help with a CLI command that creates the .eslintrc file for you:<\/p>\n
MacBook-Pro-Gianluca:$ eslint --init\r\n? What style of indentation do you use? Spaces\r\n? What quotes do you use for strings? Double\r\n? What line endings do you use? Unix\r\n? Do you require semicolons? Yes\r\n? Are you using ECMAScript 6 features? No\r\n? Where will your code run? Browser\r\n? Do you use JSX? No\r\n? What format do you want your config file to be in? JSON\r\nSuccessfully created .eslintrc file in \/Users\/Desktop\/testtest<\/pre>\n
The –init option prompts you a simple 8-steps wizard with some basilar questions about your usage of JavaScript and ESLint.\u00a0After a simple set of commands you will have your .eslintrc file, which will look like this:<\/p>\n
{\r\n \"rules\": {\r\n \"indent\": [\r\n 2,\r\n 4\r\n ],\r\n \"quotes\": [\r\n 2,\r\n \"double\"\r\n ],\r\n \"linebreak-style\": [\r\n 2,\r\n \"unix\"\r\n ],\r\n \"semi\": [\r\n 2,\r\n \"always\"\r\n ]\r\n },\r\n \"env\": {\r\n \"browser\": true\r\n }\r\n}<\/pre>\nStarting from this basic configuration you can toggle the rules you need and adjust each setting to fit your requirements.<\/p>\n
Live Linting with an IDE<\/h4>\n
As complementary possibility, ESLint is able to run “live” within your editor or IDE, in order to integrate warnings and errors with the standard ones, coming from your program.\u00a0As example of this, we consider the configuration of ESLint with the IntelliJ IDEA IDE.<\/p>\n
We suppose that you have already downloaded NodeJS and the ESLint package via npm. At this point, go to IntelliJ IDEA>Preferences (or, under MacOS, just hit Command+,).<\/p>\n
The preferences panel enables you (up.right)\u00a0to search in the preferences by a keyword: type “eslint”.<\/p>\n
Then you will be prompted to a screen similar to the one below:<\/p>\n
<\/a><\/p>\nNow:<\/p>\n
- \n
- Enable ESLint as Code Quality tool by toggling the checkbox.<\/li>\n
- Check the path of your NodeJS interpreter (the default should be already configured)<\/li>\n
- Tell IntelliJ where to find the ESLint package: if you downloaded it in the standard npm package folder, than copy the following path (don\u00b4t forget to replace your username):
\/Users\/your-username\/.npm-packages\/lib\/node_modules\/eslint<\/code><\/li>\n- If you want to specify a different configuration file you can either let ESLint looking automatically for the next .eslintrc file or specify one by yourself (this last option is useful when the .eslinrc file is in a path which is not on the road from the actual path to the root)\n
- \n
- Note that, as already discussed, in either case, the settings in the configuration file will override the ESLint default settings.<\/li>\n<\/ul>\n<\/li>\n
- In the last field you can specify a folder that contains custom rules. Such rules can be project specific and can be included in the ESLint workflow for specific need (more in the next paragraph).<\/li>\n<\/ol>\n
After this configuration, ESLint will start running in your IDE, checking your JavaScript “live”.<\/p>\n
Our first custom rule<\/h4>\n
The most interesting feature of ESLint is, undoubtedly, the possibility to write own rules to validate and correct our code. ESLint comes with a simple and clear set of APIs to let you build your rule within a moment. What is important is just to follow the correct format ESLint understands!<\/p>\n
- If you want to specify a different configuration file you can either let ESLint looking automatically for the next .eslintrc file or specify one by yourself (this last option is useful when the .eslinrc file is in a path which is not on the road from the actual path to the root)\n