Getting started

Tools

To get started with a javascript project you will need some basic tools.

Nodejs

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser, which was designed to build scalable network applications.

Download here

Yarn

Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don't ever have to worry.

Nodejs is required and yarn is packaged with it when installed Nodejs.

Once Nodejs is installed you can enable yarn by opening a powershell/command line as administrator and inputting:

corepack enable

You can now run

yarn init

ni

ni - use the right package manager no matter the project. Best when working with existing projects. Documentation here

To install:

npm i -g @antfu/ni

ni - install

ni vue
# npm install vue
# yarn add vue

nr - run

nr dev
# npm run dev
# yarn dev

nx - execute

nx create-nuxt-app my-project
# npx create-nuxt-app my-project
# yarn dlx create-nuxt-app my-project

VS Code

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages and runtimes (such as C++, C#, Java, Python, PHP, Go, .NET).

Download here

Suggested extensions

• ESLint - Linter for javascript and typescript
• Copilot - Uses OpenAI to suggest code
• i18n Ally - Useful extension for dealing with vue-i18n translations
• Volar - Syntax highlighter and formatter for vue2-3

Git

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Download here

Beaulieu web department

We host our projects in an organization repository in github. To use our organization ask an administrator to add your github account to the organization. Your github account must have 2FA activated on your account and you must have a SSH key linked to your account (see below to configure).

Configure SSH key

1. On your local computer run:

ssh-keygen -t ed25519 -C "your_email@example.com"

2. You can leave the passphrase empty by pressing ENTER
3. On windows navigate in windows explorer to %userprofile%/.ssh
4. If there isn't a config file create it.
5. Open it with a text editor and add:

Host github.com
    User git
    Hostname github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/id_ed25519

6. Open the id_ed25519.pub and copy the content
7. Go to your github account settings and click SSH and GPG keys
8. Then click New SSH key, give it a title and pase the contents of id_ed25519.pub and click Add SSH key

Add project to github

There are 2 ways to add a project to github, either you initialize it in github and clone it to your local development environnement or push an existing git project to github.

Create in github

1. Go to our organization repository and click New.
2. Fill out the form and make sure the repository is private.
3. Choose to initialize the repository with a README file, choose a .gitignore template, preferably the node one.
4. Don't select a license and click Create repository
5. In the repository click Code then copy the url
6. On your computer navigate to your root project folder with a terminal and type:

git clone {your repository url}

Push existing repository to github

1. Initialize a git repo in your project folder:

git init

2. Go to our organization repository and click New.
3. Fill out the form and make sure the repository is private.
4. Don't initialize the repository with a README file, don't choose a .gitignore template.
5. Don't select a license and click Create repository
6. In your project folder run:

git remote add origin {your repository url}
git add .
git commit -am "First commit"
git push -u origin master

Yarn or NPM

Some projects use npm and some use yarn. If you are working on an existing project follow the project readme, otherwise choose one. For future projects yarn is probably better as it has less dependency issues and is a bit faster. They are both very similar with commands.

Do the init command and answer the questions about your project:

yarn init

npm

npm init

ESLint

ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

VSCode Extension

It is strongly recommended to download the vscode extension for eslint so that your code gets automatically formatted on save. Download

And to configure VS Code to auto fix, create .vscode/settings.json in the root of your project with:

...
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
    // Enable the ESlint flat config support
    "eslint.experimental.useFlatConfig": true,
...

Antfu

We use Antfu's eslint config which is configured for Typescript, Javascript, Vue and Nuxt.

To install in your project:

yarn add -D @antfu/eslint-config eslint typescript

npm

npm install -D @antfu/eslint-config eslint typescript

Then create eslint.config.js in the root of your project with :

import antfu from '@antfu/eslint-config'

export default antfu()

Typescript vs Javascript

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. It adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor. It understands JavaScript and uses type inference to give you great tooling without additional code.

Stylelint

Stylelint statically analyzes your code to quickly find problems. It is built into most text editors and you can run Stylelint as part of your continuous integration pipeline.

Using in vue

To install in your project:

yarn add -D stylelint stylelint-config-recommended-vue stylelint-config-standard

npm

npm install -D stylelint stylelint-config-recommended-vue stylelint-config-standard

Then create .stylelintrc in the root of your project with (if there is already a .stylelintrc.js or .stylelintrc you can safely delete and remake with the following options):

{
    "extends": [
        "stylelint-config-standard",
        "stylelint-config-recommended-vue"
    ]
}

And to configure VS Code to auto fix, create .vscode/settings.json in the root of your project with:

{
    "eslint.experimental.useFlatConfig": true,
    "editor.codeActionsOnSave": {
          "source.fixAll.stylelint": true
     },
    "stylelint.validate": [
        "css",
        "less",
        "postcss",
        "vue"
    ]
}

What's next

Then decide if you are making a frontend or a backend project.

• Frontend
• Backend