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.