eslint-config-pjchender

    0.1.4 • Public • Published

    eslint-config-pjchender

    Installation

    # install the eslint-config-pjchender
    yarn add -D eslint-config-pjchender
    
    # install the peerDependencies of eslint-config-pjchender
    npx install-peerdeps --dev eslint-config-pjchender

    Usage

    TypeScript (React)

    In default, eslint-plugin-pjchender will use rules for TypeScript files. For preventing the conflict between ESLint and tsconfig, we recommend to create a tsconfig.eslint.json file. For example

    // tsconfig.eslint.json
    {
      "extends": "./tsconfig.json",
      // include all files in the project
      "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "next-env.d.ts", ".eslintrc.js"],
      "exclude": ["node_modules", "build", "scripts"]
    }

    Then use this file as the parseOptions.project:

    // .eslintrc
    {
      // default will use rules included for TS files
      // and remember to use parseOptions to refer you tsconfig
      "extends": ["pjchender"],
      "parserOptions": {
        "project": "tsconfig.eslint.json"
      }
    }

    JavaScript (React)

    Extends the config with the extends field in eslint config:

    // .eslintrc
    {
      // if you only need JavaScript and React related rules
      "extends": ["pjchender/react"]
    }

    TypeScript

    For projects only use TypeScript without React, you can extend from pjchender/typescript. This only setup the config for TypeScript files without .jsx or .tsx.

    For example,

    // tsconfig.eslint.json
    {
      "extends": "./tsconfig.json",
      "compilerOptions": {
        "types": ["jest"]
      },
      "include": ["src/**/*", "tests/**/*", ".eslintrc.js", "jest.config.js", "commitlint.config.js"],
      "exclude": ["node_modules", "build", "scripts"]
    }

    Then use this file as the parseOptions.project:

    // .eslintrc
    {
      "extends": ["pjchender/typescript"],
      "parserOptions": {
        "project": "tsconfig.eslint.json"
      }
    }

    If you want to use import alias in your project, you can use babel-module to do this by yourself. For example,

    const allExtensions = ['.ts', '.tsx', '.d.ts', '.js', '.jsx', '.json'];
    
    module.exports = {
      settings: {
        node: {
          extensions: allExtensions,
        },
        'import/resolver': {
          'babel-module': {
            alias: {
              '@': './src',
            },
            extensions: allExtensions,
          },
        },
      },
    };

    Prettier

    Setup prettier config:

    // .prettierrc
    {
      "printWidth": 100,
      "tabWidth": 2,
      "useTabs": false,
      "semi": true, // required
      "singleQuote": true, // required
      "quoteProps": "as-needed",
      "jsxSingleQuote": false,
      "trailingComma": "all",
      "bracketSpacing": true,
      "bracketSameLine": false,
      "arrowParens": "always"
    }

    Development and Deployment

    Write files in the tests folder and see whether ESLint works as expected:

    npm run lint:test
    npm run lint:test -- --fix

    After push to the main branch, the release job will automatically start.

    Inspired By

    Install

    npm i eslint-config-pjchender

    DownloadsWeekly Downloads

    9

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    22 kB

    Total Files

    22

    Last publish

    Collaborators

    • pjchender