• About
  • Advertise
  • Careers
  • Contact
月曜日, 3月 27, 2023
  • Login
No Result
View All Result
NEWSLETTER
cuusoolab.
  • Home
    • Home – Layout 1
    • Home – Layout 2
    • Home – Layout 3
    • Home – Layout 4
    • Home – Layout 5
  • World
  • Politics
  • Business
  • Science
  • Tech
    Mailchimp、2020最新レポート発表,メール業界のシェアが60%以上利用

    Mailchimp、2020最新レポート発表,メール業界のシェアが60%以上利用

    Trending Tags

    • Sillicon Valley
    • Climate Change
    • Election Results
    • Flat Earth
    • Golden Globes
    • MotoGP 2017
    • Mr. Robot
  • Entertainment
  • Lifestyle
    • All
    • food
    スターバックス・カナダが代替肉を使ったメニューを展開

    スターバックス・カナダが代替肉を使ったメニューを展開

    Trending Tags

    • Golden Globes
    • Mr. Robot
    • MotoGP 2017
    • Climate Change
    • Flat Earth
  • Home
    • Home – Layout 1
    • Home – Layout 2
    • Home – Layout 3
    • Home – Layout 4
    • Home – Layout 5
  • World
  • Politics
  • Business
  • Science
  • Tech
    Mailchimp、2020最新レポート発表,メール業界のシェアが60%以上利用

    Mailchimp、2020最新レポート発表,メール業界のシェアが60%以上利用

    Trending Tags

    • Sillicon Valley
    • Climate Change
    • Election Results
    • Flat Earth
    • Golden Globes
    • MotoGP 2017
    • Mr. Robot
  • Entertainment
  • Lifestyle
    • All
    • food
    スターバックス・カナダが代替肉を使ったメニューを展開

    スターバックス・カナダが代替肉を使ったメニューを展開

    Trending Tags

    • Golden Globes
    • Mr. Robot
    • MotoGP 2017
    • Climate Change
    • Flat Earth
No Result
View All Result
cuusoolab.
No Result
View All Result
Home tool

テキストエディタのAtomのインストールからオススメの初期設定とプラグイン

by cslorime
10/04/2019
in tool
0
テキストエディタのAtomのインストールからオススメの初期設定とプラグイン
0
SHARES
826
VIEWS
Share on FacebookShare on Twitter

コーディング・プログラミングにはテキストエディタは必要不可欠のツールです。ソースコードだけでなく、マークダウンでの議事録やブログを書くときにもテキストエディタは便利です。

テキストエディタにも種類がたくさんあります。よく使っているものは、Atom(アトム)、Espresso(エスプレッソ)、Sublime Text(サブライムテキスト)を使用しています。

Atomのインストール

公式サイトであるatom.ioからアプリインストーラのダウンロードします。

Webブラウザ「chrome」「Safari」「Edge」などのウェブブラウザを起動し、次の URL へアクセスします。

https://atom.io/

「Download」をクリックします。
AtomはmacOS・Windows・Linuxもあります。自分のOSに適したものを選択しましょう。

クリックするとインストーラのダウンロードがはじまります。

ダウンロードが完了したら「実行」をクリックしましょう。

Atomが起動すればAtomのインストールは完了です。最初に開くと、「Welcome Guide」の画面が表示されるので、「Show Welcom Guide when opening Atom」のチェックを外して、毎回起動したときに表示されないようにしておきましょう。

Atomを日本語化する

⌘ + , (カンマ)で設定画面(Settings)、もしくはメニューバーの[File]→[Settings]から[Settings]の画面を開きます。

サイドメニューから「+Install」を選択(クリック)して、検索ボックスに「Japanese-menu」と入力すると日本語化のパッケージが表示されます。

他の色々なパッケージやテーマを追加したい場合も同じ手順でインストールできるので、覚えておきましょう。

「japanese-menu」という日本語化のパッケージが表示されます、「インストール」ボタンを選択してインストールしてください。

色々な表記が英語から日本語に変更されます。

パッケージのインストール

基本の機能だけでも使いやすいですが、より作業が捗るようにパッケージをインストールしておきましょう。

Atomオススメパッケージ

  • minimap
  • highlight-selected
  • autocomplete-paths
  • file-icons

minimap

右サイドにコードの全体マップが表示されます。

長いコードや改行の多いコーディングしているときに全体を把握したり、minimapの位置を選択することで素早く移動できます。

highlight-selected

選択した文字列を自動で検索してハイライト表示してくれるパッケージです。

例えば <div> を選択した場合、下の画像のように白い四角の枠でハイライト表示してくれます。パラメーターやクラスなど選択して使用すると便利です。

autocomplete-paths

カーソル位置のある行を薄くハイライトしてくれます。

意外とカーソル位置はコーディングをしているとわからない時もあり、間違ってコードを変更したりする時もあるので、意外と思うかもしれませんが、インストールしておくと便利です。

file-icons

右サイドのファイルの表示のところに、Atomで開いたファイルの拡張子を読み取り、ファイルごとのアイコンを自動で表示してくれるパッケージです。

通常、プロジェクトごとにファイルを管理しているので、「Project」という機能で一気にファイルを開いたりします。このときに、ファイルを判別しやすく、早くアクセスすることができます。

エディタの基本設定

環境設定の「エディタ設定」(Settings)から基本設定を変更します。

「インデントガイドを表示」「不可視文字を表示」「ソフトラップ」のチェックを入れます。

インデントガイドを表示

インデント(字下げ)をした時に、ガイド線がついてわかりやすくしてくれます。
<li>や<ul>などの使用が多い時など、インデントの位置ごとに縦の線を表示してくれるので、分かりやすいです。

不可視文字を表示

スペースやタブ、改行など目に見えない部分を可視化してくれる設定です。

スペースやソフトタブは点々(・),改行は罫線のようなマーク(┐)などで表示してくれます、また、全角スペースは透明になり全角スペースが原因でコードが動かなくなるというのを事前に防ぐことができます。

ソフトラップ

デフォルトのコード表示では、改行しない限り長いテキストがウインドウのサイズを超えて右方向へ続いてしまうので、自動でテキストが折り返すようにしておきます。

テーマの設定

Atomのコードのシンタックス(色分け)やテーマ(見た目)を自分の好みに変更できます。

Atom自体の見た目に関しては「インターフェーステーマ」、コードのシンタックス(色分け)周りは「シンタックステーマ」をインストールして変更できるものが、配布されています。<Material>というテーマをインストールしていますが他にもオススメがあるのでUI・Syntaxを検索してインストールしてみてください。

Atom theme gallery からテーマをインストール

Atom theme gallery を参考にテーマを選択しましょう。

<Material>


UI: atom-material-ui
Syntax: atom-material-syntax

<Seti>

背景が重い黒なので、画面上で文字を読み取りやすいです。
UI: seti-ui
Syntax: seti-syntax

<Slack>

チャットツール「Slack」をモチーフにしたデザイン
UI: slack-ui
Syntax: atom-light-syntax


Tags: Atomテキストエディタ初心者
cslorime

cslorime

Next Post
webデザイナーを目指す人が準備しておくテキストエディタ

webデザイナーを目指す人が準備しておくテキストエディタ

Recommended

WordPressへのログイン

WordPressへのログイン

4年 ago
Wherbyの使い方-招待された場合

Wherbyの使い方-招待された場合

3年 ago

Popular News

    Connect with us

    Newsletter

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
    SUBSCRIBE

    Category

    • basic_wordpress
    • food
    • info
    • Tech
    • tool
    • WordPress
    • Trending
    • Comments
    • Latest
    Wherbyの使い方-招待された場合

    Wherbyの使い方-招待された場合

    23/04/2020
    テキストエディタのAtomのインストールからオススメの初期設定とプラグイン

    テキストエディタのAtomのインストールからオススメの初期設定とプラグイン

    10/04/2019
    WordPress構築に便利だったツール

    WordPress編集ができるようになるためのチートシートコレクション

    15/02/2020
    ダッシュボード(管理画面)を使う

    ダッシュボード(管理画面)を使う

    13/04/2019
    Wherbyの使い方-招待された場合

    Wherbyの使い方-招待された場合

    0
    webデザイナーを目指す人が準備しておくテキストエディタ

    webデザイナーを目指す人が準備しておくテキストエディタ

    0
    WordPressへのログイン

    WordPressへのログイン

    0
    ダッシュボード(管理画面)を使う

    ダッシュボード(管理画面)を使う

    0
    Wherbyの使い方-招待された場合

    Wherbyの使い方-招待された場合

    23/04/2020
    スターバックス・カナダが代替肉を使ったメニューを展開

    スターバックス・カナダが代替肉を使ったメニューを展開

    01/03/2020
    Mailchimp、2020最新レポート発表,メール業界のシェアが60%以上利用

    Mailchimp、2020最新レポート発表,メール業界のシェアが60%以上利用

    01/03/2020
    スマホでWordPressを簡単に更新する方法

    スマホでWordPressを簡単に更新する方法

    15/02/2020

    About Us

    We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.

    • About
    • Advertise
    • Careers
    • Contact

    © 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

    No Result
    View All Result
    • Home
    • Politics
    • World
    • Business
    • Science
    • National
    • Entertainment
    • Gaming
    • Movie
    • Music
    • Sports
    • Fashion
    • Lifestyle
    • Travel
    • Tech
    • Health
    • Food

    © 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

    Welcome Back!

    Login to your account below

    Forgotten Password?

    Retrieve your password

    Please enter your username or email address to reset your password.

    Log In
    Close

    Buy me a cup of coffee

    A ridiculous amount of coffee was consumed in the process of building this project. Add some fuel if you'd like to keep me going!