You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/02-coding-style/article.md
+31-20
Original file line number
Diff line number
Diff line change
@@ -248,21 +248,22 @@ That's because when reading a code, we first want to know "what it does". If the
248
248
249
249
## Style guides
250
250
251
-
There are many details in the code style.
251
+
A style guide contains general rules about "how to write": which quotes to use, how many spaces to indent, where to put line breaks etc. A lot of minor things.
252
252
253
-
As the team becomes bigger, a common agreement on them becomes the "team style guide".
253
+
In total, when all members of a team use the same style guide, the code looks uniform. No matter who of the team wrote it, still the same style.
254
254
255
-
There are many open style guides, for instance:
255
+
Surely, a team may think out a style guide themselves. But as of now, there's no need to. There are many tried, worked out style guides, easy to adopt.
You can browse them and choose something as a base. As you become more mature in JavaScript programming, you might want to read them all to pick up the common principles.
264
+
If you're a novice developer, then you could start with the cheatsheet above in the chapter, and later browse the style guides to pick up the common principles and maybe choose one.
264
265
265
-
## Style checkers
266
+
## Automated linters
266
267
267
268
There are tools that can check the code style automatically. They are called "linters".
268
269
@@ -272,43 +273,53 @@ So it's recommended to install one, even if you don't want to stick to a "code s
272
273
273
274
Most well-known tools are:
274
275
275
-
- [JSLint](http://www.jslint.com/) -- one of the oldest open-source solutions.
276
-
- [JSHint](http://www.jshint.com/) -- the more "featured" variant of JSLint.
277
-
- [ESLint](http://eslint.org/) -- the newest breed.
276
+
- [JSLint](http://www.jslint.com/) -- one of the first linters.
277
+
- [JSHint](http://www.jshint.com/) -- more settings than JSHint.
278
+
- [ESLint](http://eslint.org/) -- probably the newest one.
278
279
279
280
All of them can do the job. The author uses [ESLint](http://eslint.org/).
280
281
281
-
Here are simple steps to start using it:
282
+
Most linters are integrated with editors: just enable the plugin in the editor and configure the style.
283
+
284
+
For instance, for ESLint you should do the following:
282
285
283
286
1. Install [Node.JS](https://nodejs.org/).
284
-
2. Install eslint:`npm i -g eslint` (npm is Node.JSpackage installer).
285
-
3. Create a config file `.eslintrc`in your JavaScript project (the dot at the start is mandatory).
287
+
2. Install ESLint with the command `npm install -g eslint` (npm is Node.JSpackage installer).
288
+
3. Create a config file named `.eslintrc`inthe root ofyour JavaScript project (inthe folder that contains all your files).
Here the directive `"extends"` denotes that we base on the "eslint:recommended" set of settings, and then we specify our own.
308
+
304
309
Then install/enable the plugin for your editor that integrates with ESLint. The majority of editors have it.
305
310
306
-
Also you can see [the manual](http://eslint.org/docs/user-guide/getting-started) for advanced examples, rules and options of ESLint.
311
+
It is possible to download style rule sets from the web and extend them instead. See <http://eslint.org/docs/user-guide/getting-started> for more details about installation.
312
+
313
+
Using a linter has the great side-effect. Linters catch typos. For instance, when an undefined variable is accessed, a linter detects it and (if integrated with an editor) highlights. In most cases that's a mistype. So we can fix it right ahead.
314
+
315
+
For that reason even if you're not concerned about styles, using a linter is highly recommended.
316
+
317
+
Also certain IDEs support built-in linting, but not so tunable as ESLint.
307
318
308
319
## Summary
309
320
310
-
All syntax rules from this chapter and the style guides aim to increase readability.
321
+
All syntax rules from this chapter and the style guides aim to increase readability, so all of them are debatable.
311
322
312
-
All of them are debatable.
323
+
When we think about "how to write better?", the sole criterion is "what makes the code more readable and easier to understand? what helps to evade errors?" That's the main thing to keep in mind when choosing the style or discussing which one is better.
313
324
314
-
When we think about "how to write better?", the sole criterion is "what makes the code more readable and easier to understand? what helps to evade errors?"
325
+
Read style guides to see the latest ideas about that and follow those that you find the best.
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/03-comments/article.md
+1-68
Original file line number
Diff line number
Diff line change
@@ -143,75 +143,8 @@ Why the task is solved this way?
143
143
Any subtle features of the code? Where they are used?
144
144
: If the code has anything subtle and counter-obvious, it's definitely worth commenting.
145
145
146
-
## Style guides
147
-
148
-
A style guide contains general rules about "how to write": which quotes to use, how many spaces to indent, where to put line breaks etc. A lot of minor things.
149
-
150
-
In total, when all members of a team use the same style guide, the code looks uniform. No matter who of the team wrote it, still the same style.
151
-
152
-
Surely, a team may think out a style guide themselves. But as of now, there's no need to. There are many tried, worked out style guides, easy to adopt.
If you're a novice developer, then you could start with the cheatsheet in the chapter <info:coding-style>, and later browse the style guides to see what looks best.
162
-
163
-
Also consider the automatic style checkers, described below.
164
-
165
-
## Automated style linters
166
-
167
-
There are tools that automate style checking, called "linters".
168
-
169
-
Most known are:
170
-
171
-
-[JSLint](http://www.jslint.com/) -- one of the first linters.
172
-
-[JSHint](http://www.jshint.com/) -- more settings than JSHint.
173
-
-[ESLint](http://eslint.org/) -- probably the newest one.
174
-
175
-
The author of this chapter uses ESLint.
176
-
177
-
Most linters are integrated with editors: just enable the plugin in the editor and configure the style.
178
-
179
-
For instance, for ESLint you should do the following:
180
-
181
-
1. Install Node.JS (can take from the <http://nodejs.org>).
182
-
2. Install ESLint with the command `npm install -g eslint`.
183
-
3. Create a config file named `.eslintrc` in the root of your JavaScript project (in the folder that contains all your files).
184
-
185
-
Here's an example of `.eslintrc`:
186
-
187
-
```js
188
-
{
189
-
"extends":"eslint:recommended",
190
-
"env": {
191
-
"browser":true,
192
-
"node":true,
193
-
"es6":true
194
-
},
195
-
"rules": {
196
-
"no-console":0,
197
-
},
198
-
"indent":2
199
-
}
200
-
```
201
-
202
-
Here the directive `"extends"` denotes that we base on the "eslint:recommended" set of settings, and then we specify our own.
203
-
204
-
It is possible to download style rule sets from the web and extend them instead. See <http://eslint.org/docs/user-guide/getting-started> for more details about installation.
205
-
206
-
Using a linter has the great side-effect. Linters catch typos. For instance, when an undefined variable is accessed, a linter detects it and (if integrated with an editor) highlights. In most cases that's a mistype. So we can fix it right ahead.
207
-
208
-
For that reason even if you're not concerned about styles, using a linter is really recommended.
209
-
210
-
211
146
## Summary
212
147
213
148
One of signs of a good developer is his comments. Good comments allow to maintain the code well, return to it after a long delay and use features more effectively.
214
149
215
-
Code style is important too, especially in the team. When other people look at your code, the impression is largely defined by the style. Good code is easier to read and understand.
216
-
217
-
Speaking about style rules: quotes, spaces etc, we should keep in mind that all of them are good *only* if they make the code better. More readable, easier to maintain. That's the main thing to keep in mind when choosing the style or discussing which one is better.
150
+
Comments are also used for auto-documenting tools: they read them and generate HTML-docs (or in another format).
0 commit comments