eslint-config-aftership

This is for node 10 or above only.

Please check legacy tags for previous version of node runtime support.

AfterShip ESLint config (modified from eslint-config-airbnb)

following Airbnb JavaScript Style Guide commit a12dec90d173464a3fc4e4536b8c6f639fb93236

Rules that cannot be checked by ESLint (Backend only)

• Use camelCase for files and folders if possible (exceptions could be made in some special cases)
• Use camelCase when naming functions
• Use PascalCase when naming class variables

• Use camelCase when naming variables

  const name = 'John';, const emailAddress = 'john@gmail.com';

• Use SNAKE_UPPERCASE when naming constant variables but no need for required module

  const USER = 'John';, const DEFAULT_EMAIL = 'john@gmail.com';

• Use const for required module

  const fs = require('fs');

• Use JSDoc for documentation. Guidelines Here

• When constructing class for module.exports, create it as follows:

    'use strict';
  
    // Declare imports
  
    // Class
    class Example {
        constructor() {
  
        }
  
        exampleFunction1() {
  
        }
  
        ...
    }
  
    module.exports = Example;
  

Why we choose these ESLint rules?

See here

Versioning

We follow semver for the versioning strategy.

Major version indicates the eslint major version

Minor version indicates adding rules/options (more strict)

Path version indicates removing rules/options (more loose)

Installation

As we support frontend and backend project at the same time, please refer to the following guide for all optional dependencies.

on your repository:

• If you are AfterShip member, grunt-init-node already installed it for you

• If you are not or you want to install in the existing repository:

  1. npm install --save-dev eslint-config-aftership eslint eslint-plugin-import

  2. Keep the ^ in the package.json for eslint-config-aftership, if the project is still in development. Replace the ^ with ~ if you want to prevent new rules which may brother you in travis.

  3. Create a .eslintrc in the project root

      {
          "extends": "aftership"
      }
     

     If your repo is a React project using webpack.js, you should extends aftership/react, and install additional packages

      npm install eslint-plugin-html eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint eslint-import-resolver-webpack
     

      {
          "extends": "aftership/react",
          "settings": {
              "import/resolver": {
                  "webpack": {
                  "config": "webpack.config.js"
              }
          }
      }
     

     If your repo is a Vue project using webpack, you should extends aftership/vue, and install additional packages

      npm install eslint-plugin-html eslint-plugin-vue babel-eslint vue-eslint-parser eslint-import-resolver-webpack
     

      {
          "extends": "aftership/vue",
          "settings": {
              "import/resolver": {
                  "webpack": {
                  "config": "webpack.config.js"
              }
          }
      }
     

  4. Add it to npm test so that travis can test it for us, for example:

     package.json:

      {
        "scripts": {
          "lint": "eslint --ext .{jsx|vue},.js ."
        }
      }
     

     travis.yml:

      install:
        - npm install
      script:
        - npm run lint
     

on your editor:

1. If the repository doesn't have eslint installed, you can install it as global package

   • npm install -g eslint-config-aftership

   • Create a .eslintrc in $HOME

       {
           "extends": "aftership"
       }
     

2. For Atom:

   • Install in terminal by apm install linter linter-eslint
   • If you want to use global eslint, Preference -> Packages -> linter-eslint -> check Use Global ESLint

3. For PhpStorm:

   • Languages & Frameworks -> JavaScript -> choose ECMAScript 6 for JavaScript language version
   • Preference -> Plugins -> click Browse repositories... -> search ESLint -> click Install plugin
   • Preference -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint -> check Enable

4. For Sublime Text 3:

   • if you are using nvm, add the following script to ~/.bash_profile or ~/.zshenv (check which shell you are using in SYSTEM DEFAULT (not the same as terminal default) by echo $SHELL)

       if hash brew 2> /dev/null && [[ -d "$(brew --prefix nvm)" ]]; then
           export NVM_DIR="$(brew --prefix nvm)"
       else
           export NVM_DIR="$HOME/.nvm"
       fi
     
       if [[ -s "$NVM_DIR/nvm.sh" ]]; then
           source "$NVM_DIR/nvm.sh"
       fi
     

     remove the corresponding nvm loading script in .bashrc or .zshrc

   • Install Package Control

   • Install SublimeLinter and SublimeLinter-contrib-eslint by Package Control
   • Restart Sublime Text 3
   • Restart computer if ESLint is not working

5. For vim or neovim:

   • neovim is preferred over vim, as neovim can load plugin asynchronously, which highly improve performance when linting with ESLint
   • Install benekastah/neomake by any plugin manager, such as vim-plug

   • Add the following lines to ~/.vimrc (vim) or ~/.config/nvim/init.vim (neovim)

       autocmd BufWrite * :Neomake
     
       let g:neomake_javascript_enabled_makers= ['eslint']
     
       " load local eslint in the project root
       " modified from https://github.com/mtscout6/syntastic-local-eslint.vim
       let s:eslint_path = system('PATH=$(npm bin):$PATH && which eslint')
       let g:neomake_javascript_eslint_exe = substitute(s:eslint_path, '^\n*\s*\(.\{-}\)\n*\s*$', '\1', '')
     

License

Copyright (c) 2020 AfterShip

Licensed under the MIT license.