3r33838. 3r3-31. 3r33838.  3r33838. 3r33838.  3r33838. Adil Imran is a programmer who has been working in this field for a long time, sharing experiences, lessons and observations with colleagues in his blog. New article 3r3555. Adila - about tools that help write beautiful and clean code that works well. 3r33838.  3r33838. 3r33838.  3r33838. From the author: you want to write good code, but you don’t know where to start, try to read this and that, put it into practice. But still, there are more questions than answers. Do I need to remove the "dead" code? What to do if an unused variable is detected in an already written project? How to find problem patterns and fix it? These questions are important, and many of us are trying to answer them. But the best thing is to do everything well from scratch, so that then you don’t have to look for problem areas and patch holes, losing time. To create a good code there are several tools that can be called indispensable. 3r33838.  3r33838. 3r33838.  3r33838. Examples that we consider in this article are relevant to React, although what you read can be applied to almost any web project. 3r33838.  3r33838.
3r33855. 3r33838.  3r33838.
Skillbox recommends: Practical course
"The profession of web developer" . 3r33838.  3r33838. 3r33838.  3r33838. We remind you: 3r33737. for all readers of "Habr" - a discount of 1?000 rubles when writing to any Skillbox course using the promo code "Habr". 3r3738. 3r33859. 3r33838.  3r33838. The entire list of article tools is:
 3r33838. 3r33841.  3r33838. 3r33853. Prettier
 3r33838. 3r33853. ESLint
 3r33838. 3r33853. Automate Format and Lint on Save
 3r33838. 3r33853. Husky
 3r33838. 3r33853. Lint-staged
 3r33838. 3r33853. With Husky and Lint-staged Combined
 3r33838. 3r33853. EditorConfig
 3r33838. 3r33858. 3r33838.  3r33838. 3r3747. Let's start with the Prettier
3r33838.  3r33838. This tool is a thoughtful code optimizer. 3r33838.  3r33838. 3r33838.  3r33838. 3r375. 3r33838.  3r33838. 3r33838.  3r33838. Why is it needed? 3r33836. 3r33838.  3r33838. 3r33838.  3r33838. Cleans up the ready-made code. Just imagine that you need to optimize about 20 thousand lines. Prettier does it all automatically and quickly. 3r33838.  3r33838. 3r33838.  3r33838. It is easy to use and easy to adapt for yourself - several teams work on improving the Prettier, so you can choose the version that is right for you. 3r33838.  3r33838. 3r33838.  3r33838. If you are a novice programmer who wants to write beautiful code, but do not know where to start, try Prettier. 3r33838.  3r33838. 3r33838.  3r33838. [b] Installation 3r33836. 3r33838.  3r33838. 3r33838.  3r33838. You need to create a folder called app, and type the following on the command line inside the folder:
 3r33838. 3r33838.  3r33838. 3r3693. 3r? 3517. npm init -y 3r33737. 3r33838.  3r33838. This command will create a package.json file. 3r33838.  3r33838. 3r33838.  3r33838. Next, we deal with dependencies. 3r33838.  3r33838. 3r33838.  3r33838. 3r3693. 3r? 3517. yarn add --dev prettier 3r33737. 3r33838.  3r33838. After executing the command inside the newly created file the following appears: 3r33839  3r33838. 3r3693. 3r? 3517. {
"name": "react-boiler-plate",
"version": "???",
"description": "A react boiler plate",
"main": "src /index.js",
"author": "Adeel Imran",
"license": "MIT",
"scripts": {
"prettier": "prettier --write src /** /*. js"
}, 3r33870. "devDependencies": {
"prettier": "^ ???" 3r33870.}
} 3r33737. 3r33838.  3r33838. Next, create a src /folder inside the app folder. And inside the src /index.js file. Actually, you can call him whatever you like, the main thing is to insert this into his body:
 3r33838. 3r3693. 3r? 3517. let person = {
name: "Yoda",
designation: 'Jedi Master'
}; 3r33838. 3r33838. 3r33838. function trainJedi (jediWarrion) {3r33838. if (jediWarrion.name === 'Yoda') {
console.log ('No need! already trained'); 3r33838.}
console.log (`Training $ {jediWarrion.name} complete`)
}
3r33838. trainJedi (person)
trainJedi ({name: 'Adeel', 3r33838. designation: 'padawan'
}); 3r33737. 3r33838.  3r33838. Now we have src /app /index.js with clumsy code. 3r33838.  3r33838. 3r33838.  3r33838. You can perform the following operations on it:
 3r33838. - format manually; 3r33838.  3r33838. - use automation; 3r33838.  3r33838. - do nothing (Let things go and move on). 3r33838.  3r33838. 3r33838.  3r33838. It is better not to choose the third option, otherwise why do we need code optimization tools at all? Let's choose the second option. We have a dependency and a Prettier script inside our package.json file. 3r33838.  3r33838. 3r33838.  3r33838. Now create prettier.config.js in the app folder. 3r33838.  3r33838. 3r33838.  3r33838. 3r3693. 3r? 3517. module.exports = {
printWidth: 10?
singleQuote: true,
trailingComma: 'all',
bracketSpacing: true,
jsxBracketSameLine: false,
tabWidth: ?
semi: true,
}; 3r33737. 3r33838.  3r33838. [b] printWidth will make sure that the code does not exceed 100 characters; 3r33838.  3r33838. singleQuote converts all double quotes to single quotes; 3r33838.  3r33838. trailingComma will check the presence of all dangling commas in the code, especially at the end of the last property of the object. Explained it is here 3r33838.  3r33838. bracketSpacing controls spaces in object literals: 3r33839.  3r33838. 3r33838.  3r33838. 3r3693. 3r? 3517. If bracketSpacing is true - Example: {foo: bar}
If bracketSpacing is false - Example: {foo: bar}
3r33838. jsxBracketSameLine works with formatting the JSX element ">"
3r33838. //true example
3r33838.
3r33838. 3r33838. //false example
3r33838.
3r33737. 3r33838.  3r33838. tabWidth determines the number of spaces at the indent level. 3r33838.  3r33838. semi 3r33636. - if true displays; at the end of the statement. 3r33838.  3r33838. Here is full list of options with which Prettier can work. 3r33838.  3r33838. 3r33838.  3r33838. After the initial configuration is ready, you can do the script. 3r33838.  3r33838. 3r33838.  3r33838. “Prettier”: “prettier - write src /** /*. Js”
 3r33838. 3r33838.  3r33838. In the example above, the script searches for all .js files in the src /folder. 3r33838.  3r33838. -write indicates the need to save optimized files with code. 3r33838.  3r33838. 3r33838.  3r33838. Let's run the script:
 3r33838. 3r33838.  3r33838. yarn prettier
 3r33838. 3r33838.  3r33838. 3r33838.  3r33838. 3r33838.  3r33838. If you have any problems with an example, then 3r33300. here is the
repository. where you can find everything ready. 3r33838.  3r33838. 3r33838.  3r33838. 3r3747. ESLint
3r33838.  3r33838. This tool analyzes the code in order to help detect problem patterns that do not comply with the rules and standards. It works for most programming languages. 3r33838.  3r33838. 3r33838.  3r33838. [b] Why is it needed when applied to jаvascript? 3r33836. 3r33838.  3r33838. 3r33838.  3r33838. Since jаvascript is a fairly free language, developers often make mistakes. ESLint helps to find problems without executing a written program. 3r33838.  3r33838. 3r33838.  3r33838. [b] How does ESLint stand out among its peers? 3r33836. 3r33838.  3r33838. 3r33838.  3r33838. Its easy to customize, it is very flexible. You can add and remove rules if necessary - literally everything is configured. So, you can format the code according to the set of rules that you use. 3r33838.  3r33838. 3r33838.  3r33838. [b] Now two style guides are most relevant: 3r33838.  3r33838. 3r33841.  3r33838. 3r33853. Google jаvascript Style Guide
 3r33838. 3r33853. Airbnb jаvascript Style Guide
 3r33838. 3r33858. 3r33838.  3r33838. As for me, I recommend the second option. It is very popular, you can be sure of this by going to 3r33333. its github
. 3r33838.  3r33838. 3r33838.  3r33838. First let's update our package.json file:
 3r33838. 3r3693. {
"name": "react-boiler-plate",
"version": "???",
"description": "A react boiler plate",
"main": "src /index.js",
"author": "Adeel Imran",
"license": "MIT",
"scripts": {
"lint": "eslint --debug src /",
"lint: write": "eslint --debug src /--fix",
"prettier": "prettier --write src /** /*. js"
}, 3r33870. "husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}, 3r33870. "lint-staged": {
"*. (js | jsx)":["npm run lint:write", "git add"]3r33838.}, 3r33870. "devDependencies": {
"babel-eslint": "^ ???", 3r33870. "eslint": "^ ???", 3r33870. "eslint-config-airbnb": "^ ???",
"eslint-config-jest-enzyme": "^ ???",
"eslint-plugin-babel": "^ ???",
"eslint-plugin-import": "^ ???",
"eslint-plugin-jest": "^ ???",
"eslint-plugin-jsx-a11y": "^ ???",
"eslint-plugin-prettier": "^ ???",
"eslint-plugin-react": "^ ???", 3r3-3870. "husky": "^ ???", 3r33870. "lint-staged": "^ ???",
"prettier": "^ ???" 3r33870.}
} 3r33737. 3r33838.  3r33838. What each option means:
 3r33838. eslint : this is the main tool for working with your own code. 3r33838.  3r33838. babel-eslint : useful if you are working with Flow or experimental features that are not yet supported by ESLint. 3r33838.  3r33838. eslint-config-airbnb : This package provides the Airbnb’s ESLint configuration to the developer. 3r33838.  3r33838. eslint-plugin-babel: companion plugin for babel-eslint. 3r33838.  3r33838. eslint-plugin-react: optimizes for react. 3r33838.  3r33838. eslint-plugin-import: Provides the ability to work with the syntax ES2015 + (ES6 +) import /export. 3r33838.  3r33838. eslint-plugin-prettier: optimizes the interaction of ESLint with Prettier. 3r33838.  3r33838. 3r33838.  3r33838. With basic things done, let's get started. For example, create a .eslintrc.js file in the app /folder. 3r33838.  3r33838. 3r3693. module.exports = {
env: {
es6: true,
browser: true,
node: true,
}, 3r33870. extends:['airbnb', 'plugin:jest/recommended', 'jest-enzyme'], 3r33870. plugins:[
'babel',
'import',
'jsx-a11y',
'react',
'prettier',
], 3r33870. parser: 'babel-eslint',
parserOptions: {
ecmaVersion: ?
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
}, 3r33870. rules: {3r33838. 'linebreak-style': 'off', //Don't play nicely with Windows. 3r33838. 3r33838. 'arrow-parens': 'off', //Incompatible with prettier
'object-curly-newline': 'off', //Incompatible with prettier
'no-mixed-operators': 'off', //Incompatible with prettier
'arrow-body-style': 'off', //Not our taste? 3r33838. 'function-paren-newline': 'off', //Incompatible with prettier
'no-plusplus': 'off',
'space-before-function-paren': ? //Incompatible with prettier
3r33838. 'max-len':['error', 100, 2, { ignoreUrls: true, }], //airbnb is
'no-console': 'error', //airbnb is using warn
'no-alert': 'error', //airbnb is using warn
3r33838. 'no-param-reassign': 'off', //Not our taste? 3r33838. "radix": "off", //parseInt, parseFloat radix turned off. Not my taste. 3r33838. 3r33838. 'react /require-default-props': 'off', //airbnb use error
'react /forbid-prop-types': 'off', //airbnb use error
'react /jsx-filename-extension':['error', { extensions:['.js']}], //airbnb is using .jsx
3r33838. 'prefer-destructuring': 'off',
3r33838. 'react /no-find-dom-node': 'off', //I don't know
'react /no-did-mount-set-state': 'off',
'react /no-unused-prop-types': 'off', //Is still buggy
'react /jsx-one-expression-per-line': 'off',
3r33838. "jsx-a11y /anchor-is-valid":["error", { "components":["Link"], "specialLink":["to"]}], 3r33870. "jsx-a11y /label-has-for":[2, {
"required": {
"every":["id"]3r33838.}
}], //for nested label htmlFor error
3r33838. 'prettier /prettier':['error'], 3r33870.}, 3r33870.}; 3r33737. 3r33838.  3r33838. Add the .eslintignore file to the app /folder. 3r33838.  3r33838. 3r33838.  3r33838. /.git
 3r33838. /.vscode
 3r33838. node_modules
 3r33838. 3r33838.  3r33838. What does the .eslintrc.js file do? 3r33838.  3r33838. 3r33838.  3r33838. Let's see:
 3r33838. 3r3693. 3r? 3517. module.exports = {
env: {},
extends: {},
plugin: {},
parser: {},
parserOptions: {},
rules: {},
}; 3r33737. 3r33838.  3r33838. env: The environment defines global variables that are already predefined. Available environments in our case are es? browser and node. Es6 will make ECMAScript 6 features available except modules. Browser will add all global variables, such as Windows. Respectively node will add all global variables Node. 3r33838.  3r33838. extends: array of strings - each additional configuration extends the previous ones. Right now we are using linting-rules with airbnb, which expand to the jest and then the jest-enzyme. 3r33838.  3r33838. Plugins: these are the basic linting rules we want to use. We work with babel, import, jsx-a11y, react, prettier and all that I indicated above. 3r33838.  3r33838. parser: ESLint uses Espree by default, but since we are working with babel, we need to use 3r3353543. Babel-eslint . 3r33838.  3r33838. parserOptions: when we change the default parser for Espree to babel-eslint, we need to specify parserOptions. 3r33838.  3r33838. rules: 3r33636. any rules we can change or replace here. 3r33838.  3r33838. 3r33838.  3r33838. If everything is clear, let's talk about .eslintignore. This option helps to specify all paths that do not need to be processed using ESLint. I use only three such ways:
 3r33838. /.git - when I don’t want to affect my git files
 3r33838. /.vscode, because I work with VS Code, and this editor has its own configuration, which needs to be specified for each project and I don’t want to go into it here. 3r33838.  3r33838. node_modules — I don’t touch the dependencies either, so I added them to the list. 3r33838.  3r33838. 3r33838.  3r33838. With this all, let's talk about the newly added scripts for our package.json
 3r33838. 3r33838.  3r33838. 3r33737. “Lint”: “eslint --debug src /”
 3r33838. “Lint: write”: “eslint --debug src /--fix” [/i] 3r33838.  3r33838. 3r33838.  3r33838. $ yarn lint - running this command, you check all your files in src /, you end up with a detailed log describing the problem areas in each file, where errors will be found, which you can then manually start and fix. 3r33838.  3r33838. 3r33838.  3r33838. 3r?383. 3r33838.  3r33838. 3r33838.  3r33838. $ yarn lint: write - this command does roughly the same thing as the previous one. The only difference is that here yarn already has the right to write - the command corrects errors by removing them from the code. 3r33838.  3r33838. 3r33838.  3r33838. So, well, if you held out until this moment, then honor and praise you. 3r33838.  3r33838. 3r33838.  3r33838. 3r? 3596. 3r33838.  3r33838. 3r33838.  3r33838. 3r3747. Husky 3r33838.  3r33838. Well, here you can perform some actions during a commit or push the code to a branch. 3r33838.  3r33838. 3r33838.  3r33838. All you need is just to install Husky:
 3r33838. 3r33838.  3r33838. 3r33737. yarn add --dev husky [/i] 3r33838.  3r33838. 3r33838.  3r33838. Next, add a snippet to the package.json file:
 3r33838. 3r3693. "husky": {
"hooks": {
"pre-commit": "YOUR_COMMAND_HERE",
"pre-push": "YOUR_COMMAND_HERE"
}
}, 3r33737. 3r33838.  3r33838. Now each time during a commit or push, the snippet will launch the execution of a specific script or command, for example, a code formatting command. 3r33838.  3r33838. 3r33838.  3r33838. 3r3747. Lint-staged 3r33838.  3r33838. Helps prevent bad code from getting into your git branch. 3r33838.  3r33838. 3r33838.  3r33838. [b] Why Lint-staged? 3r33836. 3r33838.  3r33838. 3r33838.  3r33838. Verification of the code in most cases should be done before the commit. This way you can prevent errors from entering the repository and improve the overall quality of the program. But the launch of lint for the whole project is a rather slow process, and the results of processing can be irrelevant. In the end, you only need to process the files that you want to commit. 3r33838.  3r33838. 3r33838.  3r33838. All you need to do is install the project:
 3r33838. 3r33838.  3r33838. 3r33737. yarn add --dev lint-staged [/i] 3r33838.  3r33838. 3r33838.  3r33838. Next in the package.json file add this: 3r3383839.  3r33838. 3r33838.  3r33838. 3r3693. "lint-staged": {
"*. (js | jsx)":["npm run lint:write", "git add"]3r33838.}, 3r33737. 3r33838.  3r33838. So you run lint: write, then add it to the range area. The command works for .js & .jsx files, but you can do the same for other files if you want. 3r33838.  3r33838. 3r33838.  3r33838. 3r3747. Combine Husky and Lint-staged 3r33838.  3r33838. Every time you commit your code, a script called lint-staged is run. It initiates the execution of npm run lint: write, which allows you to check and format the code. Then, the already verified code falls into the range area and the commit is performed. 3r33838.  3r33838. 3r33838.  3r33838. The final package.json file should look like this:
 3r33838. 3r33838.  3r33838. 3r3693. {
"name": "react-boiler-plate",
"version": "???",
"description": "A react boiler plate",
"main": "src /index.js",
"author": "Adeel Imran",
"license": "MIT",
"scripts": {
"lint": "eslint --debug src /",
"lint: write": "eslint --debug src /--fix",
"prettier": "prettier --write src /** /*. js"
}, 3r33870. "husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}, 3r33870. "lint-staged": {
"*. (js | jsx)":["npm run lint:write", "git add"]3r33838.}, 3r33870. "devDependencies": {
"babel-eslint": "^ ???", 3r33870. "eslint": "^ ???", 3r33870. "eslint-config-airbnb": "^ ???",
"eslint-config-jest-enzyme": "^ ???",
"eslint-plugin-babel": "^ ???",
"eslint-plugin-import": "^ ???",
"eslint-plugin-jest": "^ ???",
"eslint-plugin-jsx-a11y": "^ ???",
"eslint-plugin-prettier": "^ ???",
"eslint-plugin-react": "^ ???", 3r3-3870. "husky": "^ ???", 3r33870. "lint-staged": "^ ???",
"prettier": "^ ???" 3r33870.}
} 3r33737. 3r33838.  3r33838. Now every time you do this
 3r33838. 3r33737. $ git add. 3r33838.  3r33838. $ git commit -m "some descriptive message here" [/i] 3r33838.  3r33838. 3r33838.  3r33838. the code will be formatted automatically based on the rules from the .eslintrc.js file. 3r33838.  3r33838. 3r33838.  3r33838. 3r3747. Let's talk about EditorConfig
3r33838.  3r33838. First, create the .editorconfig file in the app /directory. Insert the following code into it:
 3r33838. 3r33838.  3r33838. # EditorConfig is awesome: EditorConfig.org 3r33838.  3r33838. 3r33838.  3r33838. # top-most EditorConfig file
 3r33838. root = true
 3r33838. 3r33838.  3r33838.[*.md]3r33838.  3r33838. trim_trailing_whitespace = false
 3r33838. 3r33838.  3r33838.[*.js]3r33838.  3r33838. trim_trailing_whitespace = true
 3r33838. 3r33838.  3r33838. # Unix-style newlines with a newline
 3r33838.