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)