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

Step 1: Criando o projeto

cd nome_do_projeto
yarn dev
touch tsconfig.json
yarn add --dev typescript @types/react @types/node
yarn dev
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

npm install -g eslint prettier
// ou
yarn global add eslint prettier
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
//.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"
}

Step 3: Configure SublimeLinter and jsPrettier

which eslint prettier node
/usr/local/bin/eslint
/usr/local/bin/prettier
/usr/local/bin/node
// SublimeLinter Settings - User
{
"linters": {
"eslint": {
"env": {
"PATH": "/usr/local/bin"
},
"args": ["--env=es6"]
}
}
}
{
"prettier_cli_path": "/usr/local/bin/prettier",
"node_path": "/usr/local/bin/node",
"auto_format_on_save": true
}

Arquiteto e Urbanista de formação, e Programador Web por paixão. Stack: PHP + MySQL e atualmente estudando Node React/Vue

Arquiteto e Urbanista de formação, e Programador Web por paixão. Stack: PHP + MySQL e atualmente estudando Node React/Vue