@mutantlove/eslint-config NPM

JavaScript ESLint rules

JavaScript ESLint bundle with best practices and common use rules for writing more consistent code
"semi": [ "error", "never" ] :godmode: ... the horror :goberserk:

Other bundles: XO, eslint-config-airbnb, eslint-config-google, more

Install

npm install eslint @mutantlove/eslint-config --save-dev

Run npm info "@mutantlove/eslint-config@latest" peerDependencies to get the packages needed in your own package.json.

It should be something like this:

...
"devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-json": "^2.0.1",
    "eslint-plugin-no-inferred-method-name": "^2.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-unicorn": "^16.0.0",
    "prettier": "^1.19.1"
}
...

Use

Add the react or node target file in your .eslintrc file:

{
    "extends": [
        // for Node.js projects
        "@mutantlove/eslint-config/targets/node",

        // for React projects
        "@mutantlove/eslint-config/targets/react",
    ]
}

Inside

eslint-plugin-import - Support for ES2015+ (ES6+) import/export syntax
eslint-plugin-promise - Enforce best practices for JavaScript promises
eslint-plugin-unicorn - Various awesome ESLint rules
eslint-plugin-html - Allows linting and fixing inline scripts contained in HTML files
eslint-plugin-react - React specific linting rules
eslint-plugin-react-hooks - Linting rules rules of React Hooks.
eslint-plugin-no-inferred-method-name - In ES6, compact methods and unnamed function expression assignments within object literals do not create a lexical identification (name) binding that corresponds to the function name identifier for recursion or event binding. The compact method syntax will not be an appropriate option for these types of solutions, and a named function expression should be used instead. This custom ESLint rule will identify instances where a function name is being called and a lexical identifier is unavailable within a compact object literal.

Example config

Using babel-eslint and eslint-import-resolver-webpack

.eslintrc

{
    "root"  : true,
    "parser": "babel-eslint",

    "extends": [ "@mutantlove/eslint-config/targets/react" ],

    "settings": {
        // Use webpack to resolve modules in imports
        "import/resolver": {
            "webpack": {
                "config": "./webpack.config.js",
            },
        },

        // Recommended if you use eslint_d
        "import/cache": {
            "lifetime": 5,
        },

        // List of regex strings that, if matched by a path, will not report
        // the matching module if no exports are found.
        "import/ignore": [ "\\.(sass|scss|less|css)$" ],
    },

    // Custom rules
    "rules": {
    },
}

.prettierrc

{
  "semi": false,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid"
}

Optional .editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

Commit messages

Using Angular's conventions.

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

feat: A new feature
fix: A bug fix
docs: Documentation only changes
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
refactor: A code change that neither fixes a bug nor adds a feature
perf: A code change that improves performance
test: Adding missing or correcting existing tests
chore: Changes to the build process or auxiliary tools and libraries such as documentation generation

Changelog

See the releases section for details.

config eslint eslint-config eslint-rules javascript prettier react node

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago