---
title: 'Adding Typescript and other features to Fuse template'
disqus: hackmd
---

Adding Typescript and other features to Fuse template
===

[TOC]

## ESLint


To integrate ESLint with your IDE you need to install the extenstion, if it is [VSCode](https://code.visualstudio.com/download) you will need to install [ESLint Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

### Configuring React Hooks ESLint Plugin


### ESLint file before

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parser": "babel-eslint",
    "extends": [
        "airbnb",
        "plugin:prettier/recommended",
        "prettier/react"
    ],
    "plugins": [
        "prettier"
    ],
    "settings": {
        "import/resolver": {
            "node": {
                "paths": [
                    "src"
                ]
            }
        }
    },
    "rules": {
        "prettier/prettier": [
            "error"
        ],
        "react/jsx-filename-extension": [
            "warn",
            {
                "extensions": [
                    ".js",
                    ".jsx"
                ]
            }
        ],
        "no-unused-vars": "off",
        "no-param-reassign": "off",
        "no-console": "off",
        "no-use-before-define": "off",
        "no-nested-ternary": "off",
        "no-underscore-dangle": "off",
        "import/no-unresolved": "off",
        "no-constant-condition": "off",
        "global-require": "off",
        "react/no-array-index-key": "off",
        "react/no-unescaped-entities": "off",
        "react/destructuring-assignment": "off",
        "react/jsx-props-no-spreading": "off",
        "react/state-in-constructor": "off",
        "react/no-danger": "off",
        "react/prop-types": "off",
        "react/forbid-prop-types": "off",
        "react/require-default-props": "off",
        "react/default-props-match-prop-types": "off",
        "react/no-unused-prop-types": "off"
    }
}

### ESLint file after

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "babel-eslint",
  "extends": [
    "airbnb",
    "plugin:prettier/recommended",
    "prettier/react"
  ],
  "plugins": [
    "prettier",
    "react-hooks"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "paths": [
          "src"
        ]
      }
    }
  },
  "rules": {
    "react/jsx-filename-extension": [
      "warn",
      {
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    ],
    "no-unused-vars": "off",
    "no-param-reassign": "off",
    "no-use-before-define": "off",
    "no-nested-ternary": "off",
    "no-underscore-dangle": "off",
    "import/no-unresolved": "off",
    "no-constant-condition": "off",
    "global-require": "off",
    "react/no-array-index-key": "off",
    "react/no-unescaped-entities": "off",
    "react/destructuring-assignment": "off",
    "react/jsx-props-no-spreading": "off",
    "react/state-in-constructor": "off",
    "react/no-danger": "off",
    "react/prop-types": "off",
    "react/forbid-prop-types": "off",
    "react/require-default-props": "off",
    "react/default-props-match-prop-types": "off",
    "react/no-unused-prop-types": "off",
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies,
    "prettier/prettier": "error",
    "import/prefer-default-export": "off",
    "no-console": [
      "error",
      {
        "allow": [
          "tron"
        ]
      }
    ],
  }
}

## Prettier


To integrate Prettier with your IDE, if it is [VSCode](https://code.visualstudio.com/download) you need to install this plugin [Prettier Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

### Prettier before

{
    printWidth: 120,
    singleQuote: true,
    tabWidth: 4,
    useTabs: true,
    trailingComma: "none",
    arrowParens: "avoid"
}

### Prettier after

{
  "printWidth": 120,
  "singleQuote": true,
  "tabWidth": 4,
  "useTabs": true,
  "arrowParens": "avoid",
  "trailingComma": "es5",
  "semi": true
}

## Typescript


### Typescript Dependencies

$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

### Typescript tsconfig.json

//

## ESLint CLI

- Fix some lint problems with ESLint --fix in `.js` files

## Jest

Adding Jest support to project, it is simple because Jest offer a CLI that create it for you.

$ ./node_modules/.bin/jest --init

or

$ jest --init

And follow instructions as the way you need for your project.

In the end, you will have it


### Using Enzyme

What is [Enzyme](https://enzymejs.github.io/enzyme/)?

> Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output

### Using Testing Library

What is [Testing Library](https://testing-library.com/docs/intro)?

> The @testing-library family of packages helps you test UI components in a user-centric way

**Testing Library will be your strong friend in your testing journey!**

### End configuration about Enzyme and Testing Library

import enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import '@testing-library/jest-dom';

enzyme.configure({ adapter: new Adapter() });

### An importante config was Babel

Without babel config, nothing will work, alias, file transformation, and other features that we need in jest configuration.

## Initializing Github Example with Hooks + Context API :heart:

### Explanation hooks

//

### Explanation context api

//

### How Context API works with Hooks?

//

###### tags: `React Hooks` `Templates` `Documentation` `Typescript`