Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/viclafouch/eslint-config-viclafouch
🛠 These are my settings for TypeScript / ESLint / Prettier in a project
https://github.com/viclafouch/eslint-config-viclafouch
configuration ecmascript eslint linter prettier react typescript
Last synced: about 19 hours ago
JSON representation
🛠 These are my settings for TypeScript / ESLint / Prettier in a project
- Host: GitHub
- URL: https://github.com/viclafouch/eslint-config-viclafouch
- Owner: viclafouch
- Created: 2019-10-01T15:15:30.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-08T09:01:48.000Z (about 1 month ago)
- Last Synced: 2024-10-15T01:31:24.661Z (about 1 month ago)
- Topics: configuration, ecmascript, eslint, linter, prettier, react, typescript
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@viclafouch/eslint-config-viclafouch
- Size: 527 KB
- Stars: 5
- Watchers: 0
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Eslint / Prettier Setup of @viclafouch 📦
These are the ESLint and Prettier settings for a Next.js project ⚡️
# Table of Contents
- [Eslint / Prettier Setup of @viclafouch 📦](#eslint--prettier-setup-of-viclafouch-)
- [Table of Contents](#table-of-contents)
- [What it does](#what-it-does)
- [Local / Per Project Install](#local--per-project-install)
- [Scripts](#scripts)
- [If you use TypeScript](#if-you-use-typescript)
- [Extend your tsconfig](#extend-your-tsconfig)
- [Add the typescript eslint config](#add-the-typescript-eslint-config)
- [Better typing](#better-typing)
- [Scripts](#scripts-1)
- [If you want to enable imports sorting](#if-you-want-to-enable-imports-sorting)
- [If you use Next.js](#if-you-use-nextjs)
- [If you use React.js](#if-you-use-reactjs)
- [If you want to use Prettier](#if-you-want-to-use-prettier)
- [If you use VS Code](#if-you-use-vs-code)
## What it does
* Lints JavaScript / TypeScript based on the latest standards
* Multiple configs `react` `hooks` `next`..
* Shared `tsconfig.json`
* Fixes issues and formatting errors with Prettier
* Check for accessibility rules on JSX elements.
## Local / Per Project Install
1. If you don't already have a `package.json` file, create one with `npm init`.
2. Then we need to install the config:
```
npm i -D @viclafouch/eslint-config-viclafouch
```
1. Create a `.eslintrc` file in the root of your project's directory (it should live where package.json does). Your `.eslintrc` file should look like this:
2. Extends your config with the minimal base of @viclafouch config :
```json
{
"extends": [
"@viclafouch/eslint-config-viclafouch"
]
}
```
or js version for `.eslintrc.js` file:
```js
/**
* @type {import("eslint").Linter.Config}
*/
module.exports = {
extends: [
"@viclafouch/eslint-config-viclafouch"
]
}
```
### Scripts
You can add two scripts to your package.json to lint and/or fix your code:
```json
{
"scripts": {
"lint": "eslint .",
"lint:fix": "npm run lint -- --fix",
}
}
```
## If you use TypeScript
### Extend your tsconfig
First, extend your current config file `tsconfig.json` with this following snippet:
```json
{
"extends": "@viclafouch/eslint-config-viclafouch/tsconfig.json",
...
}
```
### Add the typescript eslint config
Then, add the TypeScript Eslint rules to your `.eslintrc` file:
```js
{
"extends": [
"@viclafouch/eslint-config-viclafouch",
"@viclafouch/eslint-config-viclafouch/typescript"
]
}
```
or js version for `.eslintrc.js` file:
```js
/**
* @type {import("eslint").Linter.Config}
*/
module.exports = {
extends: [
'@viclafouch/eslint-config-viclafouch',
'@viclafouch/eslint-config-viclafouch/typescript'
],
parserOptions: {
project: true,
tsconfigRootDir: __dirname
},
root: true
}
```
### Better typing
TypeScript's built-in typings are not perfect. viclafouch-reset makes them better.
1. Create a `reset.d.ts` file in your project with these contents:
```ts
// Do not add any other lines of code to this file!
import '@viclafouch/eslint-config-viclafouch/reset.d'
```
2. Enjoy improved typings across your entire project.
### Scripts
You can add two scripts to your package.json to lint and/or fix your code:
```json
{
"scripts": {
"lint": "tsc --noEmit && eslint . --ext .js,.jsx,.ts,.tsx",
"lint:fix": "npm run lint -- --fix",
},
}
```
## If you want to enable imports sorting
If you want to sort your imports using your alias at the same time from your `jsonfig.json` or `tsconfig.json` file.
```js
{
"extends": [
"@viclafouch/eslint-config-viclafouch",
"@viclafouch/eslint-config-viclafouch/imports"
]
}
```
## If you use Next.js
You can also add additional rules for Next.js. It includes the following configurations : `@viclafouch/eslint-config-viclafouch/react`, `@viclafouch/eslint-config-viclafouch/hooks` and Next.js specific rules.
```js
{
"extends": [
"@viclafouch/eslint-config-viclafouch",
"@viclafouch/eslint-config-viclafouch/next"
]
}
```
## If you use React.js
You can also add additional rules for only React.js ecosystem (without Next.js).
```js
{
"extends": [
"@viclafouch/eslint-config-viclafouch",
"@viclafouch/eslint-config-viclafouch/react",
"@viclafouch/eslint-config-viclafouch/hooks"
]
}
```
## If you want to use Prettier
Be sure to add the prettier config at the end of your `extends` array.
```js
{
"extends": [
"@viclafouch/eslint-config-viclafouch",
"@viclafouch/eslint-config-viclafouch/imports",
"@viclafouch/eslint-config-viclafouch/react",
"@viclafouch/eslint-config-viclafouch/hooks",
"@viclafouch/eslint-config-viclafouch/prettier" // be sure to be the last
]
}
```
## If you use VS Code
Once you have done. You probably want your editor to lint and fix for you.
1. Install the [ESLint package](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
2. Now we need to setup some VS Code settings. Create a `.vscode` folder at your root project, and create a `settings.json` file in this folder. Then, add this little config:
```json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
```