huypham50 / lint Goto Github PK

https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

Install: npx install-peerdeps --dev eslint-config-airbnb npm install --save-dev eslint-config-prettier

You will be asked to use yarn if yarn is your default package manager

Create a file named .eslintrc and config like this: prettier must be in last in order to override some eslints.

{
    "extends": ["airbnb", "prettier"],
    "env": {
        "browser": true,
        "node": true
    },
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
    }
}

yarn add prettier

Create a file named .prettierrc and config like this

{
    "singleQuote": true,
    "printWidth": 80,
    "editor.formatOnSave": true,
    "proseWrap": "always",
    "tabWidth": 2,
    "requireConfig": false,
    "useTabs": false,
    "trailingComma": "none",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "semi": true
}

Now prettier has been setup but not executed (we "extends": "airbnb" up on .eslintrc ), we prettier to run automagically everytime we save a file:

If not existed yet, create a folder named .vscode and create a file named settings.json and add this line of code in:

{
    "editor.formatOnSave": true
}

yarn add husky lint-staged

In package.json, add this config in to run eslint every time you commit: Once again, we execute prettier after eslint. It's called prettier for a reason, right?

"lint-staged": {
    "**/*.js": [
        "eslint --fix",
        "prettier --write"
        "git add"
    ]
},
"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},