DEV Community

Juan Esteban Perdomo
Juan Esteban Perdomo

Posted on • Updated on

well... let's go to implement linter to project!

for start, we need install 5 packages like dev dependencies

npm install prettier eslint eslint-config-prettier husky lint-staged -D
Enter fullscreen mode Exit fullscreen mode

after that, create the next files in the project root called .prettierrc, .prettierignore, .eslintignore, (also depending if you are using npm or yarn create this file: .npmrc or .yarnrc)

first I want you config the eslint file:

run this command:

npx eslint --init
Enter fullscreen mode Exit fullscreen mode

after that follow the next images <3

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

Image description

to done this process you will can see file called .eslintrc.json but you need add some config more for can have recomend, eslint, fix and another plus that give us from eslint

{
  "env": {
    "es2021": true,
    "commonjs": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard-with-typescript",
    "prettier"
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": ["./tsconfig.json"]
  },
  "plugins": ["react"],
  "root": true,
  "rules": {
    "react/react-in-jsx-scope": 0,
    "@typescript-eslint/explicit-function-return-type": 0
  }
}
Enter fullscreen mode Exit fullscreen mode

is very important that you have property root like true because the eslint will have know that is part of code that we want apply the fixes, look and help with suggestions in all files that we have or want apply linter, also I leave other property called rules, here you can add other rules that you don't want see, or changes

in this prettier file I suggest that you'll choose yourself config for handle the files typescript and tsx

.prettierrc

{
  "semi": true,
  "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

.prettierignore

node_modules
.expo/*
.husky/*
.vscode/*
assets/*
Enter fullscreen mode Exit fullscreen mode

.eslintignore

node_modules
.expo/*
.husky/*
.vscode/*
assets/*
Enter fullscreen mode Exit fullscreen mode

here i want to make all next install packages with the exactly version

.npmrc

save-exact=true
Enter fullscreen mode Exit fullscreen mode

.yarnrc

save-prefix true
Enter fullscreen mode Exit fullscreen mode

also run this script for add another script in package.json for run the prepare husky files

npm pkg set scripts.prepare="husky install"
Enter fullscreen mode Exit fullscreen mode

and run the next script:

npm run prepare
Enter fullscreen mode Exit fullscreen mode

then this command will generate a folder hide called .husky

Image description

run the next command for generate file bash (sh) for execute each time that you be do a commit, called pre-commit

npx husky add .husky/pre-commit "npm run lint-staged"
Enter fullscreen mode Exit fullscreen mode

like this

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn lint-staged
Enter fullscreen mode Exit fullscreen mode

with the previous command we'll create the command that will execute the previous to any commit but still we need defined the config for lint-staged

package.json

{
  "name": "my-app",
  "version": "0.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start --tunnel",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
  },
  "private": true,
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --cache --fix",
    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
  }
}
Enter fullscreen mode Exit fullscreen mode

like you can see I added another property called "lint-staged" with the files that I want run command to eslint and prettier each time that I create some commit

with all this config we already can do any commit and have a pre-commit that will execute if you edited or created files with the next extensions: js|jsx|ts|tsx using eslint and prettier with this extensions: js|jsx|ts|tsx|css|md

thanks for still follow the tutorial!

Top comments (0)