Skip to content

Commit c7add66

Browse files
committed
fixes #549
1 parent 1a9794f commit c7add66

File tree

2 files changed

+32
-88
lines changed

2 files changed

+32
-88
lines changed

1-js/03-code-quality/02-coding-style/article.md

+31-20
Original file line numberDiff line numberDiff line change
@@ -248,21 +248,22 @@ That's because when reading a code, we first want to know "what it does". If the
248248

249249
## Style guides
250250

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.
252252

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.
254254

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.
256256

257-
- [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)
257+
For instance:
258+
259+
- [Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml)
258260
- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
259261
- [Idiomatic.JS](https://github.com/rwaldron/idiomatic.js)
262+
- (there are more)
260263

261-
There exist more there in the wild.
262-
263-
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.
264265
265-
## Style checkers
266+
## Automated linters
266267
267268
There are tools that can check the code style automatically. They are called "linters".
268269
@@ -272,43 +273,53 @@ So it's recommended to install one, even if you don't want to stick to a "code s
272273

273274
Most well-known tools are:
274275

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.
278279

279280
All of them can do the job. The author uses [ESLint](http://eslint.org/).
280281

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:
282285

283286
1. Install [Node.JS](https://nodejs.org/).
284-
2. Install eslint: `npm i -g eslint` (npm is Node.JS package 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.JS package installer).
288+
3. Create a config file named `.eslintrc` in the root of your JavaScript project (in the folder that contains all your files).
286289

287-
An example of `.eslintrc`:
290+
Here's an example of `.eslintrc`:
288291
289292
```js
290293
{
291294
"extends": "eslint:recommended",
292295
"env": {
293296
"browser": true,
297+
"node": true,
294298
"es6": true
295299
},
296300
"rules": {
297301
"no-console": 0,
298-
"no-constant-condition": ["error", { "checkLoops": false }]
299302
},
300303
"indent": 2
301304
}
302305
```
303306
307+
Here the directive `"extends"` denotes that we base on the "eslint:recommended" set of settings, and then we specify our own.
308+
304309
Then install/enable the plugin for your editor that integrates with ESLint. The majority of editors have it.
305310
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.
307318
308319
## Summary
309320
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.
311322
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.
313324

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.

1-js/03-code-quality/03-comments/article.md

+1-68
Original file line numberDiff line numberDiff line change
@@ -143,75 +143,8 @@ Why the task is solved this way?
143143
Any subtle features of the code? Where they are used?
144144
: If the code has anything subtle and counter-obvious, it's definitely worth commenting.
145145

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.
153-
154-
For instance:
155-
156-
- [Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml)
157-
- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
158-
- [Idiomatic.JS](https://github.com/rwaldron/idiomatic.js)
159-
- (there are more)
160-
161-
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-
211146
## Summary
212147

213148
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.
214149

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

Comments
 (0)