Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elibolonur/elibol-eslint-config
https://github.com/elibolonur/elibol-eslint-config
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/elibolonur/elibol-eslint-config
- Owner: elibolonur
- License: mit
- Created: 2022-10-18T20:44:25.000Z (over 2 years ago)
- Default Branch: dev
- Last Pushed: 2022-11-24T20:41:20.000Z (about 2 years ago)
- Last Synced: 2025-01-07T12:43:14.743Z (20 days ago)
- Language: JavaScript
- Size: 71.3 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @elibol/eslint-config
Prettier and ESLint configuration for JavaScript & Vue projects
## Table Of Contents
- [Installation](#installation)
- [Usage with Vue 2/3](#default-usage)
- [Usage with Vue 3 & TypeScript](#usage-typescript)
- [Usage with JavaScript only](#usage-javascript)
- [Inheriting Prettier rules](#usage-prettier)
- [Linting your project with NPM scripts](#npm-scripts)
- [Enabling autofix on save for VS Code](#enable-autofix-vscode)
## Installation
1. Install the packages to your project with the command below:
```bash
npm install -D eslint prettier@^2.7.1 @elibol/eslint-config eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue
```
2. Create `.eslintrc.js` file in your project root if it doesn't exist
3. Pick the configuration you need from the list below and replace the content of the file with one of the examples below
4. Create `prettier.config.js` file in your project root if it doesn't exist and replace the content with the [example](#prettier-example) below
### Vue 2/3 (default config)
```js
// .eslintrc.js
module.exports = {
root: true,
extends: ['@elibol/eslint-config'],
}
```
> **NOTE:** that some rules might not work perfectly with Vue version 2. For those, feel free to override rules in `.eslintrc.js` file.
### Vue 3 & TypeScript
To be able to use **TypeScript** configuration, make sure to install dependencies below:
```bash
npm install -D @typescript-eslint/parser vue-eslint-parser @vue/eslint-config-typescript
```
```js
// .eslintrc.js
module.exports = {
root: true,
extends: ['@elibol/eslint-config/vue3-typescript'],
}
```
### JavaScript only
If you would only need to import JavaScript rules but not Vue, then you can use the package as following:
```js
module.exports = {
extends: ['@elibol/eslint-config/javascript'],
}
```
If this is the scenario, you don't need to install `eslint-plugin-vue` either.
### Example prettier.config.js file
This package uses prettier by default. For the config to work properly, you need to inherit `prettier` rules from the project.
To do that, replace content of your `prettier.config.js` file with the code below
```js
module.exports = require('@elibol/eslint-config/prettier.config')
```
> **NOTE:** By default the package exports **Vue** configuration. So using `extends: ["@elibol/eslint-config"]` or `extends: ["@elibol"]` will by default include JavaScript and `eslint-plugin-vue` rules. If you want to use pure JavaScript or Vue TypeScript configuration, see below.
## Linting your project with npm scripts
Add the scripts below to your `package.json` file. Then you will be able to run
- `npm lint` or `yarn lint` for running the linter dry
- `npm lint:fix` or `yarn lint:fix` to run the linter and fix errors/warnings (those that are fixable)
```json
{
"scripts": {
"lint": "eslint \"**/*.{vue,ts,js}\"",
"lint-fix": "eslint --fix \"**/*.{vue,ts,js}\""
}
}
```
## Enabling autofix on save for VS Code
Add the settings below to your VSCode settings to run linter on every save
`.vscode/settings.json`
```json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
```
## License
[MIT](http://opensource.org/licenses/MIT)