Overview:
The purpose of this module is to provide a unified starting point for Lion Energy JavaScript/TypeScript/JSX/React/Vue developers
when it comes to code formatting (using Prettier
) and code linting (using ESLint
).
You should install this in all new projects (and existing ones as needed)!
Installation:
npm install -D lion-pretty-lint
VSCode
Install the following plugins:
-
Prettier
: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode -
ESLint
: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Prettier
your default formatter
Make - Open VSCode settings:
Ctrl+Shift+P
->Preferences: Open User Settings (JSON)
- Add/update this line in your JSON settings
"editor.defaultFormatter": "esbenp.prettier-vscode"
This makes Prettier
your default formatter for all associated file types.
If you just want to use Prettier
for a specific file type (js, ts, jsx, etc.), then go into a file of that type and run
Ctrl+Shift+P
-> Format Document With
-> Configure Default Formatter
-> Prettier - Code formatter
Prettier
on file save
Automatically run You can manually run Prettier
any time you want to format your code, but where's the fun in that?
Instead follow these instructions to auto-format on save:
- Open VSCode settings:
Ctrl+Shift+P
->Preferences: Open User Settings (JSON)
- Add/update this line in your JSON settings:
"editor.formatOnSave": true
ESLint
Errors (if possible) on file save
Auto-fix ESLint
finds potential bugs, enforces code practices and can change formatting as well.
This module has been designed to prefer Prettier
for formatting and ESLint
for bugs, but the combination of the two is 🔥!
- Open VSCode settings:
Ctrl+Shift+P
->Preferences: Open User Settings (JSON)
- Add/update this line in your JSON settings:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}