Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ae2f51c

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /