When building web applications, using linting tools help you a crucial role in web development process. I think every developer should know, how to install and configure the linting process in your application. So, today i'll discuss about linting configuration and efficiently making sure that the best code standards are applied to our project.
Step 01: Install eslint
package in your project as dev dependency.
yarn add eslint --dev
Step 02: Eslint need to initialize, .eslintrc.json
file will be created.
yarn run eslint --init
Step 03: Eslint rules updated from .eslintrc.json
file.
"rules": {
"react/react-in-jsx-scope": "off",
"no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
"prettier/prettier": ["error", { "singleQuote": true }],
"no-console": "warn"
}
Step 04: Required plugins are needed to be install,
yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev
Step 05: Update extends array on .eslintrc.json
file,
"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"];
Step 06: Create new .prettierrc
file, paste following codes,
{
"semi": true,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"jsxSingleQuote": true,
"trailingComma": "none",
"jsxBracketSameLine": true
}
Step 07: Update your package.json
file with following codes,
"lint": "eslint .",
"lint:fix": "eslint --fix",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
Running the script yarn format
will format the code style of all JavaScript files. Like ESLint
, it has amazing Code Editors extensions that enable the Prettier
to run on files when they are being saved, formating them on the fly without the need to run the script manually!
Note: For this process i've used yarn
packages, if you're familiar with npm, then you can use npm
packages.
Time is everything in a fast pace environment so it's important to have a good setup of tools allowing the developers to be more efficient and spend more time developing new features than looking for errors on the code.
Thank you !
Top comments (0)