Create an Nx Workspace with prettier, husky and lint-staged
In this lesson we create a new empty Nx Workspace by running `yarn create nx-workspace.
While the installer provides several pre-defined structures, we pick the empty workspace and provide our own structure.
This setup creates a default structure including the files nx.json and workspace.json, which store the project meta data.
Additionally, we have an empty apps and libs folder, where the actual code gets generated.
After looking at the structure, we personalize our prettier configuration and add the husky and lint-staged dev dependencies. Inside package.json we configure the a pre-commit hook in husky and make it execute lint-staged.
To configure lint-stated which we provide a configuration on how to format certain files based on their extension.
Bram Borggreve: [0:00] To create a new Nx Workspace, we run yarn create nx-workspace and pass in the name of our project. I'm going to call mine coursus.
[0:09] The installer asks us what we want to create in the new workspace. We're going to go with the default option empty. We'll pick the Nx CLI and select no for Nx Cloud.
[0:20] When we look at the created projects, we see that there's an nx.json and workspace.json. These files are used to store the project metadata. Additionally, there's a folder for apps and lips.
[0:32] Let's cd into the project folder and open our ide. We open up prettierrc and change it to our preferred settings. After that, we install the devDependencies husky and lint-staged. Once the installation is finished, we open package.json.
[0:50] At the bottom of the file, we create a new object "husky". Inside the object, we create a new object "hooks" and there we define the pre-commit hook to execute with lint-staged.
[1:00] After that, we create a lint-staged object. We add in file extensions we want the format and we make it run the command yarn format --uncommitted. If we then open the terminal, add our changes, and make a commit, we can see that husky kicks in and formats our files.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!