@codemachiner/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 i eslint @codemachiner/eslint-config --save-dev

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

It should be something like this:

...
"devDependencies": {
    "eslint": "^5.6.1",
    "eslint-config-prettier": "^3.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-json": "^1.2.1",
    "eslint-plugin-no-inferred-method-name": "^1.0.2",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-prettier": "^3.0.0",
    "eslint-plugin-unicorn": "^6.0.1",
    "prettier": "^1.14.3"
}
...

Use

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

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

        // use for React projects
        "@codemachiner/eslint-config/targets/react",

        // optional Flow support
        "@codemachiner/eslint-config/rules/flow",
    ]
}

When using react target, besides the peer dependencies, also install eslint-plugin-jsx-control-statements

npm install --save-dev eslint-plugin-jsx-control-statements

When using with flow, Install eslint-plugin-flowtype and eslint-plugin-flowtype-errors.

npm install --save-dev eslint-plugin-flowtype eslint-plugin-flowtype-errors

Besides .eslintrc, prettier also needs configuring. Here's a recommended .prettierrc config:

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

ESLint plugins

import

Support for ES2015+ (ES6+) import/export syntax.

loaded in react & node bundles
rules in @codemachiner/eslint-config/rules/import

json

Lint JSON files.

loaded in react & node bundles

promise

Enforce best practices for JavaScript promises.

loaded in react & node bundles
rules in @codemachiner/eslint-config/rules/promise

unicorn

Various awesome ESLint rules.

loaded in react & node bundles
rules in @codemachiner/eslint-config/rules/unicorn

flowtype & flowtype-errors

flowtype: Flow specific linting rules.
flowtype-errors: Runs your code through Flow and passes the type check errors as linting errors. Any editor that has ESLint support now supports Flow.
rules in @codemachiner/eslint-config/rules/flow

html

Allows linting and fixing inline scripts contained in HTML files.

not in peerDependencies: npm install --save-dev eslint-plugin-html
loaded in react bundle
rules in @codemachiner/eslint-config/rules/html

react

React specific linting rules.

not in peerDependencies: npm install --save-dev eslint-plugin-react
loaded in react bundle
rules in @codemachiner/eslint-config/rules/react

jsx-control-statements

ESLint rules for JSX-Control-Statements babel plugin (Neater If and For for React JSX).

not in peerDependencies: npm install --save-dev eslint-plugin-jsx-control-statements
loaded in react bundle
rules in @codemachiner/eslint-config/rules/react

compat

Lint the browser compatibility of your code (using caniuse). Uses browserslist definition in your package.json.

"browserslist": [
    "last 2 chrome versions",
    "last 2 firefox versions",
    "last 2 ie versions"
],

not in peerDependencies: npm install --save-dev eslint-plugin-compat
loaded in react bundle
rules in @codemachiner/eslint-config/rules/compat

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.

loaded in react & node bundles

Using with SublimeText

SublimeLinter

Sublime Text 3 plugin that provides a framework for linting code. Whatever language you code in, SublimeLinter can help you write cleaner, better, more bug-free code. SublimeLinter has been designed to provide maximum flexibility and usability for users and maximum simplicity for linter authors.

SublimeLinter-contrib-eslint

Sublime Text 3 plugin for SublimeLinter that provides an interface to ESLint. It will be used with files that have the "javascript" syntax.

:godmode: TIP 1: Use SublimeLinter-contrib-eslint_d for "as you type lightning fast" linting.

:godmode: TIP 1.1: In order to make eslint-plugin-import and .eslintignore work you need to add chdir to your *.sublime-project file:

{
    "SublimeLinter": {
        "linters": {
            "eslint_d": {
                "chdir": "${project}"
            }
        }
    }
}

FuzzyFilePath

Fuzzy search and insert filenames inside your current project directory. Highly customizable.

...
"scopes": [
    {
        // JS - ES6 import from/import "*"
        "scope"         : "\\.js\\s",
        "prefix"        : [ "from", "import" ],
        "extensions"    : [ "js", "jsx", "sass", "scss", "less", "css" ],

        "auto"          : true,
        "relative"      : false,
        "base_directory": false,

        "replace_on_insert": [
            // Remove extensions from path
            [ "\\.js$", "" ],
            [ "\\.jsx$", "" ],
            [ "\\.json$", "" ],

            // Remove base path and setup Webpack to resolve
            [ "\\/source/", "" ],
            [ "\\/assets/", "" ]
        ],
    }, {
        // CSS - import ""
        "scope"         : "source\\.(css|sass|less)",
        "prefix"        : [ "import" ],
        "extensions"    : [ "css", "scss", "less" ],

        "auto"             : true,
        "relative"         : true,
        "base_directory"   : false,
        "replace_on_insert": [],
    }, {
        // CSS - *: url()
        "scope"         : "source\\.(css|sass|less)",
        "prefix"        : [ "url" ],
        "extensions"    : [ "png", "gif", "jpeg", "jpg", "woff", "ttf", "svg", "otf" ],

        "auto"             : true,
        "relative"         : true,
        "base_directory"   : false,
        "replace_on_insert": [],
    },
]
...

Formatting your code using ESLint rules

ESLint-Formatter

Plugin to auto-format your javascript code according to the ESLint configuration files you already have.

While using the plugin with eslint you will notice a delay when formatting. This is because of the node startup time on each lint. You can configure it to use eslint_d which starts a server in the background and interfaces eslint, making the formatting almost instant.

eslint-watch

You can autofix you files without any editor plugin by running eslint --fix on files as they change. You will need to install eslint-watch, which interfaces whatever eslint you have in your project.

npm install eslint-watch --save-dev
add a script to package.json:
"lint:watch": "esw --format simple-success --fix --watch --changed --ext .js,.jsx SOURCE_DIR"
run in terminal: npm run lint:watch

Example of `.eslintrc.js`

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

/* eslint-env node */

module.exports = {
    root  : true,
    parser: "babel-eslint",

    extends: [ "@codemachiner/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,
        },

        // A 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)$" ],
    },

    // Add your custom rules here
    rules: {
        // Don"t require .jsx extension when importing
        "import/extensions": [
            "error", "always", {
                js : "never",
                jsx: "never",
            },
        ],
    },
}