Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save proverbed/629e249309cd0a304873fddec425709b to your computer and use it in GitHub Desktop.

Select an option

Save proverbed/629e249309cd0a304873fddec425709b to your computer and use it in GitHub Desktop.

Project root:

npm install --save-dev eslint-config-airbnb eslint-config-airbnb-typescript eslint-config-prettier eslint-config-react-app eslint-import-resolver-typescript eslint-webpack-plugin eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks babel-eslint eslint-plugin-jest @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier prettier-eslint prettier-eslint-cli eslint-plugin-prettier

$ vim .eslintrc

{
  "plugins": ["prettier", "@typescript-eslint"],
  "extends": ["airbnb-typescript", "react-app", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      }
    }
  },
  "rules": {
    "object-curly-spacing": ["warn", "always"],
    "no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "args": "none"
      }
    ],
    "@typescript-eslint/semi": [
      "off"
    ],
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "args": "none"
      }
    ],
    "@typescript-eslint/no-explicit-any": [
      "error",
      {
        "ignoreRestArgs": true
      }
    ],
    "max-len": [
      "warn",
      {
        "code": 80,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreComments": true
      }
    ],
    "no-plusplus": [
      "error",
      {
        "allowForLoopAfterthoughts": true
      }
    ],
    "react/jsx-key": "error",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "**/*.test.js",
          "**/*.test.jsx",
          "**/*.test.ts",
          "**/*.test.tsx",
          "src/tests/**/*"
        ]
      }
    ],
    "react/jsx-props-no-spreading": "off",
    "import/prefer-default-export": "off",
    "react/jsx-boolean-value": "off",
    "react/prop-types": "off",
    "react/no-unescaped-entities": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-wrap-multilines": "off",
    "react/destructuring-assignment": "off"
  }
}

$ vim .eslintignore

public/*
src/vite-env.d.ts
vite.config.ts

$ vim .prettierrc

{
  "trailingComma": "es5",
  "printWidth": 100,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2
}

$ vim package.json

"scripts": {
    ..
    ..
    ..
    "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
    "format": "prettier --write 'src/**/*.{ts,tsx,scss,css,json}'",
    "isready": "npm run format && npm run lint && npm run build"
}

Give it a try:

$ yarn run lint
$ yarn run format

medium article

@proverbed
Copy link
Copy Markdown
Author

proverbed commented Jul 24, 2024

npm i --save-dev eslint-config-airbnb

npx eslint . --ext .js,.jsx,.ts,.tsx

npm install eslint-plugin-import@latest --save-dev

  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.17.0",
    "@typescript-eslint/parser": "^7.17.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^18.0.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "typescript": "^5.2.2",
    "vite": "^5.3.4"
  },

@proverbed
Copy link
Copy Markdown
Author

proverbed commented Jul 24, 2024

"lint": "eslint .",
"lint:fix": "eslint . --fix",
        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 50",
        "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 50 --fix",

@proverbed
Copy link
Copy Markdown
Author

.eslintrc.cjs

module.exports = {
    root: true,
    env: { browser: true, es2020: true },
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:react-hooks/recommended',
        'plugin:import/typescript',
        'airbnb',
    ],
    ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts', 'functions'],
    parser: '@typescript-eslint/parser',
    plugins: ['react-refresh'],
    rules: {
        'import/no-unresolved': 'off',
        'no-unused-vars': 'off',
        'import/no-absolute-path': 'off',
        'no-unresolved': 'off',
        '@typescript-eslint/no-unused-vars': ['error'],
        'react/react-in-jsx-scope': 'off',
        'react-refresh/only-export-components': [
            'warn',
            { allowConstantExport: true },
        ],
        'react/jsx-filename-extension': [1, { extensions: ['.tsx'] }],
    },
};

@proverbed
Copy link
Copy Markdown
Author

 "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^7.17.0",
        "@typescript-eslint/parser": "^7.17.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-airbnb-typescript": "^18.0.0",
        "eslint-plugin-import": "^2.29.1",
        "eslint-plugin-react": "^7.35.0",
 },

@proverbed
Copy link
Copy Markdown
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment