どのようなエディタを使用してWeb開発者?

免責事項:この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。
このリンク: https://blog.csdn.net/weixin_44517301/article/details/100105915

EDITORIAL言葉:Webフロントエンドの開発には、いくつかの時間のために持っている、と今日はメインテキスト(コード)エディタを共有したいです。一人一人が自分の好みのエディタを持っているために、異なる言語コーダに分けることができ、私はそれだけで行くに遭遇してきたここにかかりました!

どのようなエディタを使用してWeb開発者?

この質問は、数年前に出て依頼することであると考えている場合、一部の人々は、AdobeのDreamweaverのに答えることを躊躇しないだろう。はい、今まで、私たちは、Dreamweaverは非常に使いやすいエディタですが、それが提供していることを言わなければならないすべては、非常にユニークです。私もDreamweaverのプログラミングからスタートし、私は業界の公式バージョンのフロントエンドと接触した際の手数料の必要性がある、もちろん、あなたはまた、ひびの入ったバージョンを使用することができたときに、最近では、DreamweaverのDreamweaverのCC 2017の新バージョンを発売し、それは無料だったように見えます具体的に私はダウンロードして行かなかった、あなたはああを試すことができます!長い時間がありません。あなたはAdobe IDをお持ちでない場合でも、必要性は、アドビシステムズ社のIDでのログインを使用するには、登録することができます。

注意:あなたが登録契約書を読むことができることに注意してください。

ダウンロードしてインストールする手順を押します。

インストールが完了したら、このです。

サイトの管理 - 個人的なプロジェクトのスペースを作成します(倉庫)

このようなインターフェイス:

ここに画像を挿入説明

私は放棄された後、DreamweaverはHBuilderエディタを使用しています。HBuilderはDCloud(デジタルパラダイス)のサポートHTML5 Web開発のIDEを立ち上げています。

推奨Hbuilder:初心者に適した国内無料、Macとバージョンを勝つがあり、多くの設定を必要としない直接使用することができ、文法のヒントが完了し、HTMLページを書くとき、あなたはまた、直接ブラウザを開くことができ、直接ページを表示することができ、現在書いていますこのページでは、ページの効果を参照してください。

そのインターフェースはこれです:

ここに画像を挿入説明
HBuilderについての詳細は、公式サイトをhbuilderことを学ぶことができます。関数をヒンティングhbuilderコードをリコールすることは非常に強力である価値があります。

URL:のhttp://www.dcloud.io/

この最後に述べたGitHubには、初心者やサイトの一つとしてすばらしい神を設定します。はい、それは、それ自体でもあり、簡単なオンラインコードエディタ、色分けされたとコードレイアウトなど、完全に機能が付属しています。おそらく効果は以下の通り:

ここに画像を挿入説明

効果が良いです。ああ、すべての変更をコミットすることを忘れないでください!

私は私の同僚を聞いた前に最も頻繁に言及したが、オープンソースのMicrosoftの最新のVisual Studioのコードエディタの編集者です。セールスポイントとして、独自のモジュラーで、エディタ、様々なテーマやプラグインの多くは、非常に実用的。次のようにインターフェイスは、次のとおりです。

ここに画像を挿入説明

エディタのインターフェイスは非常に独特ではありませんが、Visual Studioのの影に満ちているが、それは全体的な経験は非常に良いですだ、コードのインターフェース、効率性と可読性を含む非常に高品質です。ここで私はまた、より多くの機能を使用していることに焦点を当てているしたい内蔵のVisual Studioのコードのフォーマットコード関数。この機能は、(私は見ていない、旅行のための背後にあるすべてのメモを書くことに懸命に働いた)HTMLで最も有用ではないかもしれないが、優れた結果は、CSSとJavaScriptを使用して。自体は、時間に対応するタグが知らないそのラベル参照だけ軽く右-FORMATコード(コードのフォーマット)、またはキーボードショートカットはAlt +は+ Shiftキーを使用する時には、コピーして他の場所でコードを貼り付け、またはコードはより混沌ですFは、コードがきれいで読みやすくなることができます。この点はアトムに紹介する編集者の後に来るされていないが、それはまだサポートするための拡張機能があります。もう1つの便利な機能は、「変更すべての出現」である([すべてのオカレンスを変更]すべて同じテキストを変更します)。

たとえば、あなたは突然、あなたが変数、または関数の名前を変更したいJavaScriptを書くとき、どのようにしますか?名前は、コード内で何千回も使用されています、あなたは必ずしも常にその名前を変更するために一つ一つに行くされていませんか?この時点でのみ、あなたが同時に同じデータで、文書全体を編集することができ、その後(変更箇所をすべて見つけるために、または右)のCtrl + F2キーを押し、変数を選択する必要があります。図は次のとおりです。

ここに画像を挿入説明

Visual Studio Code就告一段落了,在讲我最近在捣鼓的Atom之前,先带过两个不得不说,但我又没怎么使用的编辑器:一就是大家都知道的Notepad++。Notepad++是一个可谓全能的编辑器,各种功能齐全,主要可以用来代替Windows自带记事本。但是感觉插件系统不是很完善,导致部分功能缺失。界面如下:
ここに画像を挿入説明

特别想说一句,之前认识的一个王老师在教学的时候用的基本就是Notepad++了。可能是因为便捷吧,也没有很多复杂的插件需要安装,所以第一印象还是非常好的,本人也是这种态度,所以时不时还是会用的哦。

第二个我要带过的就是Sublime Text。

概念:

Sublime Text是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的Python API,Goto功能,即时项目切换,多选择,多窗口等。2012年6月26日推出的版本Sublime Text 2.0,与之前版本相比主要有较大的改善:支持Retina视网膜屏、快速跳到下一个、文本拖放等。在这里介绍是因为这款软件的速度很快,功能性也很全。我不怎么使用的原因是因为收费,好像直接购买要70美金吧……!

它的界面如下:
ここに画像を挿入説明

sublime Text2解说视频:http://v.youku.com/v_show/id_XMzU5NzQ5ODgw.html

特别想说的是Sublime Text的插件功能很强大。需要自己下载插件安装包来实现!

插件举例:Sublime Text汉化包、代码提示等等快捷键。

Sublime Text汉化包安装:http://www.cnblogs.com/kingwell/archive/2012/11/22/2782991.html

最后就是我在最近开始使用的一款开源编辑器,Atom,也是出自GitHub大神爸爸们之手。这软件我一拿到手就爱上了它的外观——在使用了将近半年的Visual Studio Code之后我发现上手Atom非常简单(毕竟Sublime,Visual Studio Code和Atom的操作习惯和界面高度相似),因为它和Visual Studio Code非常接近,只是听说Atom好像是一个WebApp打包出来的。Atom最大的问题就是不稳定,虽然我现在在用Beta版本,但是哪怕我在用稳定版,也会碰到程序突然闪退的问题(没错,闪退)。虽然好像数据不会掉,但是也是一件麻烦事不是吗?

除了外观之外,Atom让我非常满意的还有它的Preview HTML功能。这个功能可以在你编辑HTML代码的时候实时预览输出结果。我再Visual Studio Code上找了半天好像都没个方法,这里的插件Atom-html-preview可以做到这一功能(虽然Javascript和Ajax好像不能完整加载)。这个程序的Debug功能也是非常的实用(居然可以调试HTML我也是非常惊讶啊),具体各位去尝试一下也就明白我的意思了。

主代码界面是这样的:

ここに画像を挿入説明

插件界面是这样的:

ここに画像を挿入説明

Atom插件举例:

①Emmet

Web开发者必不可少的工具,据说是神器,强烈推荐

②color-picker

取色器

③minimap

推荐 就是Sublime右边那一竖块,显示缩小版的代码

④vim-mode

用过vim的都知道好,基本实现了大部分的功能,不过造成许多快捷键冲突,这也是其他编辑器不具备的功能

⑤git-plus

Git的插件与Sublime Text 的sublimegit功能基本一致

命令控制面板快捷键

MacOS快捷键:Cmd+Shift+H

Windows + Linux快捷键:Ctrl+Shift+H

⑥file、アイコン

画像ファイルの表側素敵なポイントをしてみましょう

⑦docblockr

コードのコメントを書きやすいです

⑧autocompleteプラス

入力は、可能な候補を提供する場合

⑨atom-CHT-メニュー

オプションメニューや右クリックメニューと言えば

要約:

ドリームウィーバー

HBuilder

GitHubのオンラインコードエディタ

Visual Studioのコード

メモ帳++

崇高テキスト2

原子

今日は、7人の異なる編集者の合計を導入しました。これは、Visual Studioのコード、崇高なテキスト2、アトム、DreamweaverのないLinuxバージョン、メモ帳++のみのWindows(Windows、Linux、およびMacの含めて)すべてのプラットフォームです。これらの大小の企業や開発者は、それぞれが私に、当然のことながら、興味深い機能のすべての習慣をカバーすることはできませんビューの小規模なWeb開発者の視点を、独自の特性を持つ製品を開発します。多くのコードを書くためのツールは、誰もが自分の好みを持っています。あなたは、コード・エディタを使用するに関係なく、私が言いたいとコンパイラ、プログラミングは、常に喜びです。

おすすめ

転載: blog.csdn.net/weixin_44517301/article/details/100105915