eslint-config-helm v1.0.0
Helm ESLint Configuration
Setup
Visual Studio Code
Clone this repository into whatever directory you keep your repositories.
cd
into this repository after it has been cloned and runnpm install
.Run the
pwd
command. Note the output, it should look something like this:/THE/PATH/TO/helm-eslint-config
.Open Visual Studio Code and install the ESLint extension by Dirk Baeumer.
Navigate to your Settings (JSON) in the command palette by pressing
⇧ Shift + ⌘ Command + P
(Mac) orCtrl + Shift + P
(Windows).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 thepwd
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"
],
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 ESLintEditor: Format On Save
box is tickedEslint: Enable
box is tickedEslint > 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:
Clone this repository into whatever directory you keep your repositories.
cd
into this repository after it has been cloned and runnpm install
.Run the
pwd
command. Note the output, it should look something like this:/THE/PATH/TO/helm-eslint-config
.Open the project you want to add ESLint to in WebStorm.
Open Preferences and navigate to
Languages & Frameworks | JavaScript | Code Quality Tools | ESLint
Set ESLint to
Manual ESLint Configuration
and underESLint package:
write the output of yourpwd
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.Set the Configuration File to
Configuration file:
and input the samepwd
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.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:
cd
into helm-eslint-config and rungit pull
for the most up-to-date version of the config.- Run
npm install
to ensure that all packages are installed/up-to-date - Globally install eslint with
npm install -g eslint@^7.6.0
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/
2 years ago