Giter VIP home page Giter VIP logo

gobarber-web-typescript's Introduction

Gobarber-Web-Typescript

Tabela

Configurando .EditorConfig

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf

Configurando Eslint

Instale as dependencias do eslint

yarn add eslint -D

Depois, inicialize

yarn eslint --init

Selecione as opções

  1. To check syntax, find problems and enforce code style
  2. Javascript modules (import/export)
  3. React
  4. Typescript? Yes
  5. Browser
  6. Use a popular style guide
  7. Airbnb
  8. JSON
  9. Would you like to install them now with npm? No

Adicionar o s pacotes que foram listados na pergunta de cima

Exemplo
yarn add -D eslint-plugin-react@^7.20.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint-plugin-import@^2.21.2 eslint-plugin-jsx-a11y@^6.3.0 eslint-plugin-react-hooks@^4 @typescript-eslint/parser@latest

Crie uma pasta chamada .eslintignore e adicione:

**/*.js
node_modules
build
/src/react-app-env.d.ts
/src/reportWebVitals.ts

Adicione no .eslintrc.json

  1. Adicione em extends
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
  1. Adicione em plugins
"react-hooks"
  1. Adicione em rules
"no-use-before-define": "off",
    "no-unused-expressions": "off",
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": "off",
    "no-console": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
    "import/prefer-default-export": "off",
    "camelcase": "off",
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/no-unused-vars": "off",
    // "@typescript-eslint/explicit-functtion-return-type": [
    //   "error",
    //   {
    //     "allowExpressios": true
    //   }
    // ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ],
    "prettier/prettier": "error"
    // "max-len": ["error", { "code": 80 }]
    // "semi": ["error", "always"]
  1. Adicione depois de rules
"settings": {
    "import/resolver": {
      "typescript": {}
    }
  }

Por último, instale a dependencia de reconhecimento de importação do typescript

yarn add eslint-import-resolver-typescript -D

Configurando Prettier

Instale as dependencias

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

Em .eslintrc.json

  1. Adicione em extends
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
  1. Adicione em plugins
"prettier"
  1. Adicione em rules
"prettier/prettier": "error"

Crie um arquivo chamado prettier.config.js com essas configs:

module.exports = {
  singleQuote: true, 
  trailingComma: 'all',
	arrowParens: 'avoid',
}

gobarber-web-typescript's People

Contributors

roymas100 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.