La manera mas facil de integrar ESLint y Prettier a mi projecto Next.Js paso a paso. Importante, debemos tener instalados los complementos de ESLint, Prettier y EditorConfig en VSCODE.
1 - Abrimos nuestro settings.json y agregamos la siguiente linea
"eslint.validate": ["typescript", "typescriptreact"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
2 - Creamos nuestro projecto
yarn create next-app {{nombre}}
3 - Instalamos TypeScript
yarn add typescript @types/react @types/node -D
Ya instalado TS vamos a cambiarle la nomenclatura a nuestros archivos JS a TSX. Posterior a eso, corremos nuestro proyecto y mismo Next va a darse cuenta que hay archivos TS y va hacer todo el config.
Hecho esto, vamos a proceder a eliminar carpetas que no nos van a servir como Public, Styles (despues vamos a crear uno parecido) y Api. Ya hecho esto vamos a notar que se va a romper todo pero vamos a solucionar esto
4 - Instalamos ESLint y lo iniciamos. Ahi mismo nos va a crear un .eslintrc.json del cual posteriormente vamos a setear cuando ya instalemos Prettier. Tambien debemos crear un archivo .eslintignore para ignorar node_modules y otras carpetas.
yarn add eslint --dev
yarn eslint --init
5 - Lo iniciamos y vamos a darle el siguiente config. Finalizado esto, eliminamos el archivos package-lock.json
6 - Instalamos prettier y las configuraciones con nuestro linter (en este caso, ESLint) y creamos nuestro archivo prettier.config.js donde van a estar nuestras configuraciones.
yarn add prettier eslint-plugin-prettier eslint-config-prettier -D
7 - Creamos un ".editorconfig" y cambiamos el valor a true en trim_trailing_whitespace y insert_final_newline. Tambien ponemos el end_of_line en lf
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
Ya instalado ESLint y Prettier toca configurarlo y arreglar errores que nos va a saltar por culpa de TypeScript
8 - Seteamos nuestros archivos de .eslintrc.json y prettier.config.js de la siguiente manera
.eslintrc.json
{
"env": {
"browser": true,
"es2021": true,
"node": true,
"jest": true
},
"extends": [
"plugin:react/recommended",
"standard",
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"settings": {
"react": { "version": "detect" }
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint", "prettier"],
"rules": {
"prettier/prettier": "error",
"space-before-function-paren": "off",
"react/prop-types": "off",
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": "off"
}
}
prettier.config.js
module.exports = {
semi: false,
singleQuote: true,
arrowParens: 'avoid',
trailingComma: 'none',
endOfLine: 'auto'
};
9- Arreglamos las cagadas que nos va a tirar ESLint
index.tsx
import React from 'react'
import Head from 'next/head'
const Home: React.FC = () => {
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1> hello world</h1>
</main>
</div>
)
}
export default Home
_App.tsx
import React from 'react'
import { AppProps } from 'next/app'
const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
return <Component {...pageProps} />
}
export default MyApp
Proximamente se viene la segunda parte de Next-images para poder incrustar svg's como componente y que se muestren en el html como svg e integrar Styled-components con Next-js en Typescript !
Top comments (0)