Automate repetitive tasks
The lectures and courses that I give as a lecturer and trainer cover the development of apps with React Native, Expo and JavaScript. Code examples and live coding sessions are an important part of the knowledge transfer. I therefore very often create sample projects and then use these projects to demonstrate certain aspects of app development with React Native and Expo. New projects are created using the CLI tool create-expo-app:
npx create-expo-app my-app
After the project has been created, there are still a few things to do before I start the actual development or coding session:
- Install and configure a linter for JavaScript so that I can be notified immediately of any (typing) errors or mistakes during development.
- Install and configure a code formatter in order to always have a uniformly formatted source code that is easy to read.
For my work, I use ESLint as a linter and Prettier for code formatting. Both tools can be installed via npm (among others) and then customized to your own requirements via a configuration file. However, as this installation and configuration always requires a few manual steps and some time, I have written a small script for my work that performs these tasks automatically.
A shell script for automation
After creating a new project using create-expo-app I can call the script like this:
curl -s "https://raw.githubusercontent.com/rbrki07/create-expo-app-post-setup/main/run.sh" | bash
The script performs the following tasks automatically:
- It installs eslint, eslint-config-universe, eslint-plugin-react-native and eslint-plugin-jest via npm. It then loads the prepared configuration file .eslintrc.json.
- It installs prettier and loads the prepared configuration file .prettierrc.json.
- Since I use VS Code at work, the script loads two VS Code-specific configuration files in the last step:
- settings.json: Sets Prettier as the default formatter and configures automatic formatting of the source code when saving a file.
- extensions.json: Suggests two VS Code plugins for ESLint and Prettier that do the integration with VS Code.
Summary
Using the shell script, I can extend any new sample project in seconds so that ESLint and Prettier are installed and set up according to my needs. This gives me the security and comfort I like to have for code examples and live coding sessions in my lectures and courses.
The source code for the script is available at GitHub.
Update 05.04.2024
The script also installs simple-git-hooks and then sets up a pre-commit hook that automatically executes ESlint and Prettier to check whether the code meets the configured guidelines.