0.0.3 • Published 4 years ago
eslint-config-sungl v0.0.3
Easy start with ESLint, Prettier, and TypeScript
These are the common settings for ESLint and Prettier to support JavaScript, React, and TypeScript.
Installation
You can install this lint rules globally. However, installing per project is recommended so your projects have the same settings within team members and machines.
- If you don't already have a
package.json
file, create one withnpm init -y
. - Then we need to install this:
npx install-peerdeps --dev eslint-config-sungl
- Check your
package.json
to see the list ofdevDependencies
. - Create a
.eslintrc
file in the root of your project's directory. And add this:
{
"extends": ["sungl"],
// add files or folders to be ignored per your project
"ignorePatterns": [".next/*", "node_modules/*", "out/*", "public/*", "temp.js", "**/vendor/*.js"]
}
- (The steps after this are optional and not recommended. Let your editor do the work!) You can add two scripts to your
package.json
to lint and/or fix:
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},
- Now you can manullay lint your code by running
npm run lint
and fix issues withnpm run lint:fix
.
Your Own Settings
If you'd like to overwrite eslint or prettier settngs, you can add rules in your .eslintrc
file.
ESLint rules go directly under "rules"
, and Prettier options go under "prettier/prettier"
.
{
"extends": [
"sungl"
],
"rules": {
"no-console": 2,
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 120,
"tabWidth": 8,
}
]
}
}
VS Code Settings
Once you've done all your installation and settings above, you can make VS Code to lint and fix for your.
- Install the ESLint package.
- Open VS Code Preferences and edit
settings.json
.
"editor.formatOnSave": true,
"tslint.enable": false,
"eslint.enable": true,
"eslint.run": "onType",
"eslint.format.enable": true,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
// tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
"prettier.disableLanguages": ["javascript", "javascriptreact", "typescript", "typescriptreact"],