DEV Community: Juan Esteban Perdomo

ok... today we'll go install commitlint

Juan Esteban Perdomo — Wed, 15 Mar 2023 02:48:27 +0000

nice... already we can start this section correctly and fixing somes fails or bugs that I found with the previous post

we'll install the commitlint package like dev dependecy

npm install commitlint -D

after that create file config called commitlint.config.js and export some config, if you don't know any of this library, this is the documentation, try to read, isn't to hard understand

the file commitlint.config.js will have the next config:

module.exports = {
  rules: {
    'header-max-length': () => Promise.resolve([0, 'always', 120]),
    'body-max-length': () => Promise.resolve([0, 'always', 120]),
  },
};

then if you make a commit you will have follow the rules:

max body 120 characters
header max: 120

one more thing for finish this...

you need add the next script for create into folder .husky file bash called commit-msg for execute after the pre-commit

npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"
# OR
yarn husky add .husky/commit-msg "yarn commitlint --edit $1"

result file .husky/commit-msg

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn commitlint --edit $1

try look the file into .husky/commit-msg and be sure that the final argument "$1" because in sometimes this part not be added

okay... now just try to do the next commit:

git add . && git commit -m "chore(commitlint): install and config done"

if you don't follow some of this rules, you'll can't do the commit

previous post, implement linter to project
next theme for the next post: thinking about that >.<

github profile

github repo: I'm still working on that >.< srry

well... let's go to implement linter to project!

Juan Esteban Perdomo — Wed, 08 Mar 2023 02:52:20 +0000

for start, we need install 5 packages like dev dependencies

npm install prettier eslint eslint-config-prettier husky lint-staged -D

after that, create the next files in the project root called .prettierrc, .prettierignore, .eslintignore, (also depending if you are using npm or yarn create this file: .npmrc or .yarnrc)

first I want you config the eslint file:

run this command:

npx eslint --init

after that follow the next images <3

to done this process you will can see file called .eslintrc.json but you need add some config more for can have recomend, eslint, fix and another plus that give us from eslint

{
  "env": {
    "es2021": true,
    "commonjs": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard-with-typescript",
    "prettier"
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": ["./tsconfig.json"]
  },
  "plugins": ["react"],
  "root": true,
  "rules": {
    "react/react-in-jsx-scope": 0,
    "@typescript-eslint/explicit-function-return-type": 0
  }
}

is very important that you have property root like true because the eslint will have know that is part of code that we want apply the fixes, look and help with suggestions in all files that we have or want apply linter, also I leave other property called rules, here you can add other rules that you don't want see, or changes

in this prettier file I suggest that you'll choose yourself config for handle the files typescript and tsx

.prettierrc

{
  "semi": true,
  "singleQuote": true
}

.prettierignore

node_modules
.expo/*
.husky/*
.vscode/*
assets/*

.eslintignore

node_modules
.expo/*
.husky/*
.vscode/*
assets/*

here i want to make all next install packages with the exactly version

.npmrc

save-exact=true

.yarnrc

save-prefix true

also run this script for add another script in package.json for run the prepare husky files

npm pkg set scripts.prepare="husky install"

and run the next script:

npm run prepare

then this command will generate a folder hide called .husky

run the next command for generate file bash (sh) for execute each time that you be do a commit, called pre-commit

npx husky add .husky/pre-commit "npm run lint-staged"

like this

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn lint-staged

with the previous command we'll create the command that will execute the previous to any commit but still we need defined the config for lint-staged

package.json

{
  "name": "my-app",
  "version": "0.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start --tunnel",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
  },
  "private": true,
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --cache --fix",
    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
  }
}

like you can see I added another property called "lint-staged" with the files that I want run command to eslint and prettier each time that I create some commit

with all this config we already can do any commit and have a pre-commit that will execute if you edited or created files with the next extensions: js|jsx|ts|tsx using eslint and prettier with this extensions: js|jsx|ts|tsx|css|md

previous post, starting a new Project using React Native with expo and typescript
next theme for the next post: config the commits using commitlint and we'll create using node a script for generate components for use in out react native project
github profile
github repo: I'm still working on that >.< srry

thanks for still follow the tutorial!

So… Let’s go to start a new Project using React Native with expo and typescript!

Juan Esteban Perdomo — Wed, 08 Mar 2023 02:18:44 +0000

In this post and other next post I’ll be create a some app using this technologies (React Native with expo) so… with this idea I wan’t to do the all config for have a linter in this Project, the commitlint for have a estándar each commit that we want.

Like always before to start any Project we need start using a commands, the first step is create a Project with expo and using typescript like this:

with npm

npx create-expo-app -t expo-template-blank-typescript my-app

with yarn

yarn create expo-app -t expo-template-blank-typescript my-app

This command Will create a folder called my-app where Will be our Project, after that we’ll need make some configuration for can run the Project in our device android and can have absolute imports

This in the tree that we have of this Project

.
├── App.tsx
├── README.md
├── app.json
├── assets
│   ├── adaptive-icon.png
│   ├── favicon.png
│   ├── icon.png
│   └── splash.png
├── babel.config.js
├── package.json
├── tsconfig.json
└── yarn.lock

Depending if you used npm or yarn you’ll have a file lock called like yarn-lock or package-lock.json

So... after that I want have import absolute using in this Project, but before can import something I need do some config, follow me ;3

First we need install module-resolver like dev dependency

With npm

npm install -D module-resolver

With yarn

yarn add -D module-resolver

After this, we can change the next file adding to file config of typescript this rute absolute, for last we need change file config babel adding the package downloaded beforely

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "module": "commonjs",
    "noEmit": true,
    "target": "es6",
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@Musicmate/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}

Is very important that you use the same name and use the first Word like capitalizer because if you only have this rute absolute in lower case the Project React native expo Will have error to build the app on your device

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {
            "@Musicmate": ["./src"],
          },
          extensions: [".js", ".jsx", ".ts", ".tsx"],
        },
      ],
    ],
  };
};

If all be working correctly, we Will can imports like absolute paths, but before to start for first time this Project, we’ll need to do the last config for can Access to same network ip without any error

For some routers to have another config, if you use the command for start the Project somes people will not have the response satisfactory (error for not connect your devices using the app expo go installed from Google play)

Change the package.json in section scripts, in specific the command start

{
  "name": "my-app",
  "version": "0.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start --tunnel",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
  },
  "private": true,
}

Using the flag –tunnel we’ll can run correctly the project and connect using the app expo go (if we are using the same network that we have running our Project)

After that you can create a some component in the folder components and import on the file Main.tsx for test if the absolute import has working

src/components/TestComponent.tsx

import { Text } from 'react-native';

export const TestComponent = () => (
  <Text>TEXT FULL UPPERCASE FOR TEST THE ABSOLUTE IMPORTS!! ♥</Text>
)

App.tsx

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

import { TestComponent } from '@MyApp/components/TestComponent';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <TestComponent />
      <StatusBar style="auto" />
    </View>
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

then just we need run the next script:

with npm

npm run start

with yarn

yarn start

open the app expo-go from your mobile installed previously and use the code qr that will return the same terminal

And the result Will be this:

For the next I’ll be using the packages eslint, prettier, husky and lint-staged for make ever commits with pre-commits and lint all code that want to do a commit

thanks for arrive until here, ;3 I'm still training my english, and if you want give me some of feedback, I'll be thanksful