Criando um Projeto com Nextjs e Tailwindcss com Typescript e configurando o Sublime Text 3 com ESLint e Prettier

Step 1: Criando o projeto

yarn create next-app --example with-tailwindcss nome_do_projeto

Após criar o projeto, vamos entrar no diretório do mesmo e iniciar o projeto para ver se está tudo ok

cd nome_do_projeto
yarn dev

Vamos configurar para usar Typescript no lugar de JS.

touch tsconfig.json
yarn add --dev typescript @types/react @types/node
yarn dev

Próximo passo, renomear os arquivos para a extensão .tsx na pasta pages e components.

mv pages/index.js pages/index.tsx
mv pages/_app.js pages/_app.tsx
mv components/nav.js components/nav.tsx

Setp 2: Configurando Eslint e Prettier

Para funcionar, tenha certeza de ter instalado as dependências.

npm install -g eslint prettier
// ou
yarn global add eslint prettier

Ps.: Se estiver usando VSCode, creio não precisar desse passo acima.

Adicione as seguintes dependências

yarn add --dev eslint
yarn add --dev eslint-webpack-plugin
yarn add --dev eslint-config-prettier
yarn add --dev eslint-plugin-prettier
yarn add --dev eslint-plugin-react
yarn add --dev @typescript-eslint/eslint-plugin
yarn add --dev @typescript-eslint/parser

Para facilitar nosso trabalho, crie os seguintes arquivos:

//.eslintrc.json
{
    // Specifies the ESLint parser
    "parser": "@typescript-eslint/parser",
    "extends": [
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "plugins": ["@typescript-eslint", "react", "prettier"],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        // Allows for the parsing of modern ECMAScript features
        "ecmaVersion": 2018,
        // Allows for the use of imports
        "sourceType": "module"
    },
    "rules": {
        "semi": "error",
        // Disable prop-types as we use TypeScript for type checking
        "react/prop-types": "off",
        "@typescript-eslint/explicit-function-return-type": "off",
        "prettier/prettier": "error",
        "@typescript-eslint/interface-name-prefix": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/ban-ts-ignore": "off",
        // needed for NextJS's jsx without react import
        "react/react-in-jsx-scope": "off"
    },
    "globals": { "React": "writable" }
}

//.prettierrc
{
    "endOfLine": "lf",
    "semi": false,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "es5"
}

No meu caso, estou utilizando Sublime Text 3 e preciso de alguns plugins para funcionar.

Vamos instalar SublimeLinter, SublimeLinter-eslint e jsPrettier

• Tools > Command Palette > Install Package > SublimeLinter
• Tools > Command Palette > Install Package > SublimeLinter-eslint
• Tools > Command Palette > Install Package > jsPrettier

Step 3: Configure SublimeLinter and jsPrettier

Para configurar esses plugins, precisamos saber o caminho exato do ESLint, Prettier e Node

No terminal, execute:

which eslint prettier node

e você verá algo semelhante a isso:

/usr/local/bin/eslint
/usr/local/bin/prettier
/usr/local/bin/node

Nós precisamos dessa informação para configurar o SublimeLinter e jsPrettier para executá-los corretamente.

Primeiro vamos configurar o SublimeLinter com ESLint, no Sublime Text, fazendo o seguinte:

• Tools > Command Palette > Preferences: SublimeLinter Settings

Você provavelmente verá uma aba com as configurações disponíveis do lado esquerdo, e as configurações de usuário do lado direito. Para configurações do usuário, adicione:

// SublimeLinter Settings - User
{
    "linters": {
        "eslint": {
            "env": {
                "PATH": "/usr/local/bin"
            },
            "args": ["--env=es6"]
        }
    }
}

Fiquem atentos ao PATH, tenha certeza que aponte para o diretório /bin/ e não inclua eslint no final da linha.

Basicamente, você está mostrando ao SublimeLinter onde poderá procurar pela instalação do eslint.

Perceba onde nós temos os argumentos, “args”. Aqui nós selecionamos um ambiente no qual define qual configuração de lint baseada em uma versão de código que irá usar. Confira a documentação oficial do ESLint para mais detalhes sobre a criação de configurações.

Agora vamos configurar o jsPrettier com o Prettier, no Sublime Text, faça o seguinte:

• Tools > Command Palette > Preferences: jsPrettier Settings — User

Nesse arquivo, adicione o seguinte código:

{
    "prettier_cli_path": "/usr/local/bin/prettier",
    "node_path": "/usr/local/bin/node",
    "auto_format_on_save": true
}

Nesse arquivo, nós falamos ao jsPrettier onde estão os executáveis para prettier e node que coletamos há uns passos atrás, com o comando which

Adicionamos também o código responsável por tentar corrigir automaticamente toda vez que salvamos nosso arquivo.

Recomendo reiniciar o Sublime Text e ver a mágica acontecer.