---
# System prepended metadata

title: Adding Typescript and other features to Fuse template
tags: [Documentation, Typescript, Templates, React Hooks]

---

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

Adding Typescript and other features to Fuse template
===


[TOC]

## ESLint

![](https://i.imgur.com/slMWzBG.png)

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

![](https://i.imgur.com/1IZ7q2o.png)

### ESLint file before

```jsonld=
{
    "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

```jsonld=
{
  "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

![](https://i.imgur.com/m4lQIjg.png)

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

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

```

### Prettier after

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

```

## Typescript

![](https://i.imgur.com/VG5bQJF.png)

### Typescript Dependencies

```shell=
$ 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.

```shell=
$ ./node_modules/.bin/jest --init
```

or

```shell=
$ jest --init
```

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

In the end, you will have it

![](https://i.imgur.com/vqD5cWG.png)

### 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

```typescript
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`
