eslint-config-helm v1.0.0

Helm ESLint Configuration

Setup

Visual Studio Code

1. Clone this repository into whatever directory you keep your repositories.

2. cd into this repository after it has been cloned and run npm install.

3. Run the pwd command. Note the output, it should look something like this: /THE/PATH/TO/helm-eslint-config.

4. Open Visual Studio Code and install the ESLint extension by Dirk Baeumer.

5. Navigate to your Settings (JSON) in the command palette by pressing ⇧ Shift + ⌘ Command + P (Mac) or Ctrl + Shift + P (Windows).

6. Take the below JSON and paste it into your Preferences: Open Settings (JSON) file in Visual Studio Code, replacing /THE/PATH/TO/helm-eslint-config with the output of the pwd command you ran earlier.

  "eslint.workingDirectories": [{ 
      "directory": "/THE/PATH/TO/THIS/REPOSITORY/helm-eslint-config", 
      "!cwd": true
      }],
  "eslint.format.enable": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "eslint.options": {
    "overrideConfigFile": "/THE/PATH/TO/THIS/REPOSITORY/helm-eslint-config/.eslintrc.js"
  },
  "eslint.trace.server": "verbose",
  "eslint.nodePath": "/THE/PATH/TO/THIS/REPOSITORY/helm-eslint-config/node_modules",
  "eslint.validate": [
    "javascript",
    "typescript",
    "html"
  ],

7. Verify that ESLint is running by navigating to the Preferences: Open Settings (UI) and make sure the following settings are as follows:

   • Editor: Default Formatter is set to ESLint
   • Editor: Format On Save box is ticked
   • Eslint: Enable box is ticked
   • Eslint > Format: Enable box is ticked

Double check that ESLint is working as expected by creating a new TypeScript file and pasting the following function in it:

// You should get all sorts of errors here.
let myTestFunction = (myTestString) => {
  myTestString = [
    "ESLint should be very upset",
    "about every aspect of this function"
  ]
  
  return myTestString
}

// If you replace the above code with:
const myTestFunction = (myTestString: Array<string>): string => {
  myTestString = [
    'ESLint should be very upset',
    'about every aspect of this function',
  ];

  return myTestString[0];
};

myTestFunction(['This should make', 'ESLint happy']);
// All warnings and errors should disappear

WebStorm

Sadly, WebStorm is a work in progress due to a lack of global configuration options around ESLint. This means that you'll have to redo these configurations in every project if you want to use them.

If you would like, you can set up ESLint with these configuration settings by doing the following:

1. Clone this repository into whatever directory you keep your repositories.

2. cd into this repository after it has been cloned and run npm install.

3. Run the pwd command. Note the output, it should look something like this: /THE/PATH/TO/helm-eslint-config.

4. Open the project you want to add ESLint to in WebStorm.

5. Open Preferences and navigate to Languages & Frameworks | JavaScript | Code Quality Tools | ESLint

6. Set ESLint to Manual ESLint Configuration and under ESLint package: write the output of your pwd command + node_modules/eslint. It should look something like this: /THE/PATH/TO/helm-eslint-config/node_modules/eslint. You can also navigate there through File Explorer or Finder.

7. Set the Configuration File to Configuration file: and input the same pwd output + .eslintrc.js. It should look something like this: /THE/PATH/TO/helm-eslint-config/.eslintrc.js. You can also navigate there through File Explorer or Finder.

8. Make sure the Run eslint --fix on save box is ticked.

Double check that ESLint is working as expected by creating a new TypeScript file and pasting the following function in it:

// You should get all sorts of errors here.
let myTestFunction = (myTestString) => {
  myTestString = [
    "ESLint should be very upset",
    "about every aspect of this function"
  ]
  
  return myTestString
}

// If you replace the above code with:
const myTestFunction = (myTestString: Array<string>): string => {
  myTestString = [
    'ESLint should be very upset',
    'about every aspect of this function',
  ];

  return myTestString[0];
};

myTestFunction(['This should make', 'ESLint happy']);
// All warnings and errors should disappear

CLI Linting

For those who want to lint an entire project or directory:

1. cd into helm-eslint-config and run git pull for the most up-to-date version of the config.
2. Run npm install to ensure that all packages are installed/up-to-date
3. Globally install eslint with npm install -g eslint@^7.6.0

4. cd into the repository you want to lint and run the following with the directory paths modified to fit your set up:

   eslint ./PATH/TO/DIRECTORY/YOU/WANT/TO/LINT \
   --ext .ts \ # Required: Specifies which file extensions will be linted
   --fix \ # Optional: Applies automatic fixes to your code
   --cache \ # Optional: Caches processed files to only lint changed ones upon next run
   --cache-location /THE/PATH/TO/helm-eslint-config/.eslintcache \ # Required if --cache is used: Specifies location for the cache file. 
   --config /THE/PATH/TO/helm-eslint-config/.eslintrc.js \
   --resolve-plugins-relative-to /THE/PATH/TO/helm-eslint-config/