Skip to content

Commit ae2f51c

Browse files
simonhemromsimonhemrom
authored
Update README.md
1 parent 846a9ac commit ae2f51c

File tree

1 file changed

+166
-0
lines changed

1 file changed

+166
-0
lines changed

‎README.md‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,169 @@ This is my private repository. Becouse it has been 'JavaScript & React core
3737
03. Get Object/JSON Local-Storage (keys && values) = { VariableName = Object.values(objectName) };
3838
04. Array in Object Name = [{id: 01, name: 'theMealdb = https://www.themealdb.com/api.php', categories: 'Food Images'}, // {id: 02, name: 'pixabay = https://pixabay.com/api/docs/', categories: 'Images && Videos'}, // {id: 03, name = 'theMealdb: https://www.themealdb.com/api.php', categories: 'Name'}];
3939

40+
<!-- TABLE OF CONTENTS -->
41+
42+
## Node.js/new apps setup table
43+
44+
- [Update Node](#update-node)
45+
- [Windows](#windows)
46+
- [Mac](#mac)
47+
- [Install and Update Yarn](#install-and-update-yarn)
48+
- [Windows](#on-windows)
49+
- [Mac](#on-mac)
50+
- [VS Code Editor Setup](#vs-code-editor-setup)
51+
- [Extensions](#extensions)
52+
- [Settings](#settings)
53+
- [Set Line Breaks](#set-line-breaks)
54+
- [Linting Setup](#linting-setup)
55+
- [Install Dev Dependencies](#install-dev-dependencies)
56+
- [Setup Linting Configuration file](#setup-linting-configuration-file)
57+
- [Contact](#contact)
58+
59+
<!-- UPDATE NODE -->
60+
61+
## Update Node
62+
63+
Please follow the below instructions to update node in your machine:
64+
65+
### Windows
66+
67+
1. Update npm
68+
```sh
69+
npm install npm@latest -g
70+
```
71+
2. Clear npm cache
72+
```sh
73+
npm cache clean -f
74+
```
75+
3. Install n
76+
```sh
77+
npm install -g n
78+
```
79+
4. Update node to latest version
80+
```sh
81+
n latest
82+
```
83+
84+
### Mac
85+
86+
1. With Homebrew
87+
```sh
88+
brew update
89+
brew upgrade node
90+
```
91+
92+
<!-- INSTALL & UPDATE YARN -->
93+
94+
## Install and Update yarn
95+
96+
Please follow the below instructions to install or update yarn in your machine.
97+
98+
### On Windows
99+
100+
1. Install yarn
101+
```sh
102+
npm install -g yarn
103+
```
104+
2. Update yarn
105+
```sh
106+
yarn set version latest
107+
```
108+
109+
### On Mac
110+
111+
1. Install yarn
112+
```sh
113+
brew install yarn
114+
```
115+
2. Update yarn
116+
```sh
117+
brew update
118+
brew upgrade yarn
119+
```
120+
121+
<!-- EDITOR SETUP -->
122+
123+
## VS Code Editor Setup
124+
125+
In order to follow along the tutorial series, I recommend you to use Visual Studio Code Editor and install & apply the below extensions and settings.
126+
127+
### Extensions
128+
129+
Install the below extensions:
130+
131+
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
132+
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
133+
- [Path Autocomplete](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)
134+
135+
### Settings
136+
137+
Go to your Visual Stuido Code `settings.json` file and add the below settings there:
138+
139+
```json
140+
// config related to code formatting
141+
"editor.defaultFormatter": "esbenp.prettier-vscode",
142+
"editor.formatOnSave": true,
143+
"[javascript]": {
144+
"editor.formatOnSave": false,
145+
"editor.defaultFormatter": null
146+
},
147+
"editor.codeActionsOnSave": {
148+
"source.fixAll.eslint": true,
149+
"source.organizeImports": true
150+
},
151+
"eslint.alwaysShowStatus": true
152+
```
153+
154+
### Set Line Breaks
155+
156+
Make sure in your VS Code Editor, "LF" is selected as line feed instead of CRLF (Carriage return and line feed). To do that, just click LF/CRLF in bottom right corner of editor, click it and change it to "LF". If you dont do that, you will get errors in my setup.
157+
158+
<img src="images/line-feed.jpg" alt="Line Feed" width="700">
159+
160+
<!-- LINTING SETUP -->
161+
162+
## Linting Setup
163+
164+
In order to lint and format your code automatically according to popular airbnb style guide, I recommend you to follow the instructions as described in video. References are as below.
165+
166+
### Install Dev Dependencies
167+
168+
```sh
169+
yarn add -D eslint prettier
170+
npx install-peerdeps --dev eslint-config-airbnb-base
171+
yarn add -D eslint-config-prettier eslint-plugin-prettier
172+
```
173+
174+
### Setup Linting Configuration file
175+
176+
Create a `.eslintrc.json` file in the project root and enter the below contents:
177+
178+
```json
179+
{
180+
"extends": ["prettier", "airbnb-base"],
181+
"parserOptions": {
182+
"ecmaVersion": 12
183+
},
184+
"env": {
185+
"commonjs": true,
186+
"node": true
187+
},
188+
"rules": {
189+
"no-console": 0,
190+
"indent": 0,
191+
"linebreak-style": 0,
192+
"prettier/prettier": [
193+
"error",
194+
{
195+
"trailingComma": "es5",
196+
"singleQuote": true,
197+
"printWidth": 100,
198+
"tabWidth": 4,
199+
"semi": true
200+
}
201+
]
202+
},
203+
"plugins": ["prettier"]
204+
}
205+
```

0 commit comments

Comments
 (0)