1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
|
---
title: Как выбрать текстовый редактор?
slug: Learn/Common_questions/Available_text_editors
translation_of: Learn/Common_questions/Available_text_editors
---
<div>{{IncludeSubnav("/en-US/Learn")}}</div>
<div class="summary">
<p>In this article we highlight some things to think about when installing a text editor for web development.</p>
</div>
<table class="learn-box nostripe standard-table">
<tbody>
<tr>
<th scope="row">Необходимые знания:</th>
<td>
<p>Вы уже должны знать о <a href="/en-US/Learn/What_software_do_I_need">различных программах, необходимых для создания веб-сайта.</a></p>
</td>
</tr>
<tr>
<th scope="row">Цель:</th>
<td>
<p>Узнать, как выбрать текстовый редактор, который наилучшим образом соответствует вашим потребностям в качестве веб-разработчика.</p>
</td>
</tr>
</tbody>
</table>
<h2 id="Summary">Summary</h2>
<p>Веб-сайт состоит в основном из текстовых файлов, поэтому для веселого и приятного процесса разработки вы должны выбрать свой текстовый редактор с умом.</p>
<p>Огромное количество вариантов немного ошеломляет, так как текстовый редактор настолько важен для компьютерных наук (да, веб-разработка - это компьютерная наука). В идеале вы должны попробовать столько редакторов, сколько сможете, и почувствовать, что соответствует вашему рабочему процессу. Но мы дадим вам несколько советов для начала.</p>
<p>Вот основные вопросы, на которые вы должны ответить:</p>
<ul>
<li>С какой ОС (операционной системой) я хочу работать?</li>
<li>Какие технологии я хочу использовать?</li>
<li>Какие основные функции я ожидаю от моего текстового редактора?</li>
<li>Хочу ли я добавить дополнительные функции в мой текстовый редактор?</li>
<li>Нужна ли мне поддержка / помощь при использовании моего текстового редактора?</li>
<li>Имеет ли смысл мой текстовый редактор для меня?</li>
</ul>
<p>Обратите внимание, что мы не упомянули цену. Очевидно, что это тоже важно, но стоимость продукта мало связана с его качеством или возможностями. Существует большая вероятность, что вы найдете подходящий текстовый редактор бесплатно.</p>
<p>Here are some popular editors:</p>
<table class="standard-table" style="height: 522px; width: 917px;">
<thead>
<tr>
<th scope="col">Редактор</th>
<th scope="col">Лицензия</th>
<th scope="col">Цена</th>
<th scope="col">ОС</th>
<th scope="col">Поддержка</th>
<th scope="col">Док.</th>
<th scope="col">Расширяемый</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://atom.io/">Atom</a></td>
<td>MIT/BSD</td>
<td style="text-align: center;">Free</td>
<td>Windows, Mac, Linux</td>
<td><a href="https://discuss.atom.io/categories" rel="external">Forum</a></td>
<td><a href="https://atom.io/docs/latest/">Online Manual</a></td>
<td style="text-align: center;"><a href="https://atom.io/packages">Yes</a></td>
</tr>
<tr>
<td><a href="http://brackets.io/" rel="external">Brackets</a></td>
<td>MIT/BSD</td>
<td style="text-align: center;">Free</td>
<td>Windows, Mac, Linux</td>
<td><a href="https://groups.google.com/forum/#!forum/brackets-dev" rel="external">Forum</a>, <a href="http://webchat.freenode.net/?channels=brackets" rel="external">IRC</a></td>
<td><a href="https://github.com/adobe/brackets/wiki" rel="external">GitHub Wiki</a></td>
<td style="text-align: center;"><a href="https://ingorichter.github.io/BracketsExtensionTweetBot/" rel="external">Yes</a></td>
</tr>
<tr>
<td><a href="https://panic.com/coda/" rel="external">Coda</a></td>
<td>Closed source</td>
<td style="text-align: center;">$99</td>
<td>Mac</td>
<td><a href="https://twitter.com/panic">Twitter</a>, <a href="https://panic.com/qa" rel="external">Forum</a>, <a href="mailto:coda@panic.com">E-mail</a></td>
<td><a href="https://panic.com/coda/#book">eBook</a></td>
<td style="text-align: center;"><a href="https://panic.com/coda/plugins.php">Yes</a></td>
</tr>
<tr>
<td><a href="http://www.codelobster.com">CodeLobster</a></td>
<td>Closed source</td>
<td style="text-align: center;">Free</td>
<td>Windows, Mac, Linux</td>
<td><a href="http://www.codelobster.com/forum/index.php" rel="external">Forum</a>, <a href="mailto:support@codelobster.com">E-mail</a></td>
<td>No end user doc</td>
<td style="text-align: center;">Yes</td>
</tr>
<tr>
<td><a href="http://www.gnu.org/software/emacs/" rel="external">Emacs</a></td>
<td>GPL 3</td>
<td style="text-align: center;">Free</td>
<td>Windows, Mac, Linux</td>
<td><a href="http://www.gnu.org/software/emacs/manual/efaq.html" rel="external">FAQ</a>, <a href="http://mail.gnu.org/mailman/listinfo/help-gnu-emacs" rel="external">Mailing list</a>, <a href="news://gnu.emacs.help" rel="external">News Group</a></td>
<td><a href="http://www.gnu.org/software/emacs/manual/html_node/emacs/index.html">Online Manual</a></td>
<td style="text-align: center;">Yes</td>
</tr>
<tr>
<td><a href="http://www.macrabbit.com/espresso/">Espresso</a></td>
<td>Closed source</td>
<td style="text-align: center;">$75</td>
<td>Mac</td>
<td><a href="http://www.macrabbit.com/support/" rel="external">FAQ</a>, <a href="mailto:support@macrabbit.com">E-mail</a></td>
<td>No end user doc,<br>
but <a href="http://wiki.macrabbit.com/">plug-in doc</a></td>
<td style="text-align: center;">Yes</td>
</tr>
<tr>
<td><a href="https://wiki.gnome.org/Apps/Gedit">Gedit</a></td>
<td>GPL</td>
<td style="text-align: center;">Free</td>
<td>Windows, Mac, Linux</td>
<td><a href="http://mail.gnome.org/mailman/listinfo/gedit-list" rel="external">Mailing list</a>, <a href="irc://irc.gnome.org/%23gedit">IRC</a></td>
<td><a href="https://help.gnome.org/users/gedit/stable/">Online Manual</a></td>
<td style="text-align: center;"><a href="https://wiki.gnome.org/Apps/Gedit/PluginsLists">Yes</a></td>
</tr>
<tr>
<td><a href="http://komodoide.com/komodo-edit/" rel="external">Komodo Edit</a></td>
<td>MPL</td>
<td style="text-align: center;">Free</td>
<td>Windows, Mac, Linux</td>
<td><a href="http://forum.komodoide.com/" rel="external">Forum</a></td>
<td><a href="http://docs.activestate.com/komodo/8.5/" rel="external">Online Manual</a></td>
<td style="text-align: center;"><a href="http://komodoide.com/resources/addons/">Yes</a></td>
</tr>
<tr>
<td><a href="http://www.notepad-plus-plus.org/" rel="external">Notepad++</a></td>
<td>GPL</td>
<td style="text-align: center;">Free</td>
<td>Windows</td>
<td><a href="http://sourceforge.net/p/notepad-plus/discussion/">Forum</a></td>
<td><a href="http://npp-wiki.tuxfamily.org/index.php?title=Main_Page" rel="external">Wiki</a></td>
<td style="text-align: center;"><a href="http://npp-wiki.tuxfamily.org/index.php?title=Plugin_Central" rel="external">Yes</a></td>
</tr>
<tr>
<td><a href="http://www.pspad.com/">PSPad</a></td>
<td>Closed source</td>
<td style="text-align: center;">Free</td>
<td>Windows</td>
<td><a href="http://gogogadgetscott.info/pspad/dotazy.htm">FAQ</a>, <a href="http://forum.pspad.com/" rel="external">Forum</a></td>
<td><a href="http://gogogadgetscott.info/pspad/">Online Help</a></td>
<td style="text-align: center;"><a href="http://www.pspad.com/en/pspad-extensions.php">Yes</a></td>
</tr>
<tr>
<td><a href="http://www.sublimetext.com/" rel="external">Sublime Text</a></td>
<td>Closed source</td>
<td style="text-align: center;">$70</td>
<td>Windows, Mac, Linux</td>
<td><a href="http://www.sublimetext.com/forum/viewforum.php?f=3" rel="external">Forum</a></td>
<td><a href="http://www.sublimetext.com/docs/3/">Official</a>,<a href="http://docs.sublimetext.info/en/latest/index.html"> Unofficial</a></td>
<td style="text-align: center;"><a href="https://sublime.wbond.net/">Yes</a></td>
</tr>
<tr>
<td><a href="http://macromates.com/" rel="external">TextMate</a></td>
<td>Closed source</td>
<td style="text-align: center;">$50</td>
<td>Mac</td>
<td><a href="https://twitter.com/macromates">Twitter</a>, <a href="http://webchat.freenode.net/?channels=textmate">IRC</a>, <a href="http://lists.macromates.com/listinfo/textmate" rel="external">Mailing list</a>, <a href="mailto:tm-support@macromates.com">E-mail</a></td>
<td><a href="http://manual.macromates.com/en/">Online Manual</a>, <a href="http://wiki.macromates.com/Main/HomePage" rel="external">Wiki</a></td>
<td style="text-align: center;"><a href="http://wiki.macromates.com/Main/Plugins" rel="external">Yes</a></td>
</tr>
<tr>
<td><a href="http://www.barebones.com/products/textwrangler/" rel="external">TextWrangler</a></td>
<td>Closed source</td>
<td style="text-align: center;">Free</td>
<td>Mac</td>
<td><a href="http://www.barebones.com/support/textwrangler/faqs.html" rel="external">FAQ</a>, <a href="https://groups.google.com/forum/#!forum/textwrangler">Forum</a></td>
<td><a href="http://ash.barebones.com/TextWrangler_User_Manual.pdf" rel="external">PDF Manual</a></td>
<td style="text-align: center;">No</td>
</tr>
<tr>
<td><a href="http://www.vim.org/" rel="external">Vim</a></td>
<td><a href="http://vimdoc.sourceforge.net/htmldoc/uganda.html#license" rel="external">Specific open license</a></td>
<td style="text-align: center;">Free</td>
<td>Windows, Mac, Linux</td>
<td><a href="http://www.vim.org/maillist.php#vim" rel="external">Mailing list</a></td>
<td><a href="http://vimdoc.sourceforge.net/">Online Manual</a></td>
<td style="text-align: center;"><a href="http://www.vim.org/scripts/script_search_results.php?order_by=creation_date&direction=descending" rel="external">Yes</a></td>
</tr>
<tr>
<td><a href="https://code.visualstudio.com/download">Visual Studio Code</a></td>
<td><a href="https://github.com/microsoft/vscode">Open Source</a> under MIT licence/ Specific licence for product</td>
<td style="text-align: center;">Free</td>
<td>Windows, Mac, Linux</td>
<td><a href="https://code.visualstudio.com/docs/supporting/faq">FAQ</a> </td>
<td><a href="https://code.visualstudio.com/docs">Documentation</a></td>
<td style="text-align: center;"><a href="https://marketplace.visualstudio.com/VSCode">Yes</a></td>
</tr>
</tbody>
</table>
<h2 id="Активное_изучение">Активное изучение</h2>
<p><em>Активное изучение пока не доступно. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Пожалуйста, рассмотрите возможность внести свой вклад</a>.</em></p>
<h2 id="Копай_глебже">Копай глебже</h2>
<h3 id="Критерии_выбора">Критерии выбора</h3>
<p>Итак, более подробно, о чем вы должны думать, когда выбираете текстовый редактор?</p>
<h4 id="С_какой_ОС_операционной_системой_я_хочу_работать">С какой ОС (операционной системой) я хочу работать?</h4>
<p>Конечно, это Ваш выбор. Однако некоторые редакторы доступны только для определенных ОС, поэтому, если Вам нравится переключаться вперед и назад, это сузит возможности. Любой текстовый редактор может выполнить работу, если он работает в вашей системе, но кроссплатформенный редактор облегчает переход с ОС на ОС.</p>
<p>So first find out which OS you're using, and then check if a given editor supports your OS. Most editors specify on their website whether they support Windows or Mac, though some editors only support certain versions (say, only Windows 7 or later and not Vista). If you're running Ubuntu, your best bet is to search within the Ubuntu Software Center. In general, of course, the Linux/UNIX world is a pretty diverse place where different distros work with different, incompatible packaging systems. That means, if you've set your heart on an obscure text editor, you may have to compile it from source yourself (not for the faint-hearted).</p>
<h4 id="What_kind_of_technologies_do_I_want_to_manipulate">What kind of technologies do I want to manipulate?</h4>
<p>Generally speaking, any text editor can open any text file. That works great for writing notes to yourself, but when you're doing web development and writing in {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("JavaScript")}}, you can produce some pretty large, complex files. Make it easier on yourself by choosing a text editor that understands the technologies you're working with. Many text editors help you out with features like</p>
<ul>
<li><strong>Code coloring. </strong>Make your file more legible by color-coding keywords based on the technology you're using.</li>
<li><strong>Code completion. </strong>Save you time by auto-completing recurring structures (for example, automatically close HTML tags, or suggesting valid values for a given CSS property).</li>
<li><strong>Code snippets. </strong>As you saw when starting a new HTML document, many technologies use the same document structure over and over. Save yourself the hassle of retyping all this by using a code snippet to pre-fill your document.</li>
</ul>
<p>Most text editors now support code coloring, but not necessarily the other two features. Make sure in particular that your text editor color-codes {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("JavaScript")}}.</p>
<h4 id="What_kind_of_basic_features_do_I_expect_from_my_text_editor">What kind of basic features do I expect from my text editor?</h4>
<p>It depends on your needs and plans. These functionalities are often helpful:</p>
<ul>
<li>Search-and-replace, in one or multiple documents, based on {{Glossary("Regular Expression", "regular expressions")}} or other patterns as needed</li>
<li>Quickly jump to a given line</li>
<li>View two parts of a large document separately</li>
<li>View HTML as it will look in the browser</li>
<li>Select text in multiple places at once</li>
<li>View your project's files and directories</li>
<li>Format your code automatically with code beautifier</li>
<li>Check spelling</li>
</ul>
<h4 id="Do_I_want_to_add_extra_features_to_my_text_editor">Do I want to add extra features to my text editor?</h4>
<p>An extensible editor comes with fewer built-in features, but can be extended based on your needs.</p>
<p>If you aren't sure which features you want, or your favorite editor lacks those features out of the box, look for an extensible editor. The best editors provide many plugins, and ideally a way to look for and install new plugins automatically.</p>
<p>If you like <em>lots </em>of features and your editor is slowing down because of all your plugins, try using an IDE (integrated development environment). An IDE provides many tools in one interface and it's a bit daunting for beginners, but always an option if your text editor feels too limited. Here are some popular IDEs:</p>
<ul>
<li><a href="http://www.aptana.com/">Aptana Studio</a></li>
<li><a href="https://eclipse.org/" rel="external">Eclipse</a></li>
<li><a href="http://komodoide.com/" rel="external">Komodo IDE</a></li>
<li><a href="https://netbeans.org/" rel="external">NetBeans IDE</a></li>
<li><a href="http://www.visualstudio.com/" rel="external">Visual Studio</a></li>
<li><a href="https://www.jetbrains.com/webstorm/" rel="external">WebStorm</a></li>
</ul>
<h4 id="Do_I_need_supporthelp_while_using_my_text_editor">Do I need support/help while using my text editor?</h4>
<p>Always good to know if you can get help or not when using software. For text editors, check for two different kinds of support:</p>
<ol>
<li>User-oriented content (FAQ, manual, online help)</li>
<li>Discussion with developers and other users (forum, email, IRC)</li>
</ol>
<p>Use the written documentation when you're learning how to use the editor. Get in touch with other users if you're troubleshooting while installing or using the editor.</p>
<h4 id="Does_my_text_editors_look-and-feel_matter_to_me">Does my text editor's look-and-feel matter to me?</h4>
<p>Well, that's a matter of taste, but some people like customizing every bit of the UI (user interface), from colors to button positions. Editors vary widely in flexibility, so check beforehand. It's not hard to find a text editor that can change color scheme, but if you want hefty customizing you may be better off with an IDE.</p>
<h3 id="Install_and_set_up">Install and set up</h3>
<p>Installing a text editor is usually quite straightforward. The method varies based on your platform but it shouldn't be too hard:</p>
<ul>
<li><strong>Windows. </strong>The developers will give you an <code>.exe</code> or <code>.msi</code> file. Sometimes the software comes in a compressed archive like <code>.zip</code>, <code>.7z</code>, or <code>.rar</code>, and in that case you'll need to install an additional program to extract the content from the archive. Windows supports <code>.zip</code> by default.</li>
<li><strong>Mac. </strong>On the editor's website you can download a <code>.dmg</code> file. Some text editors you can find directly in the Apple Store to make installation even simpler.</li>
<li><strong>Linux. </strong>In the most popular distros you can start with your graphical package manager (Ubuntu Software Center, mintInstall, GNOME Software, &c.). You can often find a <code>.deb</code> or <code>.rpm</code> file for prepackaged software, but most of the time you'll have to use your distro's repository server or, in worst case scenario, compile your editor from source. Take the time to carefully check the installation instructions on the text editor's website.</li>
</ul>
<p>When you install a new text editor, your OS will probably continue to open text files with its default editor until you change the <em>file association. </em>These instructions will help you specify that your OS should open files in your preferred editor when you double-click them:</p>
<ul>
<li>Windows
<ul>
<li><a href="http://windows.microsoft.com/en-us/windows-8/choose-programs-windows-uses-default" rel="external">Windows 8</a></li>
<li><a href="http://windows.microsoft.com/en-us/windows/change-default-programs#1TC=windows-7" rel="external">Windows 7</a></li>
<li><a href="http://pcsupport.about.com/od/fixtheproblem/f/chdefprogram.htm">older systems</a></li>
</ul>
</li>
<li><a href="http://osxdaily.com/2013/08/08/change-default-application-open-files-mac-os-x/" rel="external">Mac OS X</a></li>
<li>Linux
<ul>
<li><a href="http://askubuntu.com/questions/289337/how-can-i-change-file-association-globally" rel="external">Ubuntu Unity</a></li>
<li><a href="https://help.gnome.org/users/gnome-help/stable/files-open.html.en" rel="external">GNOME</a></li>
<li><a href="http://doc.opensuse.org/documentation/html/openSUSE_113/opensuse-kdeuser/cha.kde.cust.html#pro.kde.cust.system.fileass">KDE</a></li>
</ul>
</li>
</ul>
<h2 id="Next_steps">Next steps</h2>
<p>Now that you have a good text editor, you could take some time to finalize <a href="/en-US/Learn/Set_up_a_basic_working_environment">your basic working environment</a>, or, if you want to play with it right away, write <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">your very first web page</a>.</p>
|