Make development more productive and enjoyable with WebStorm, the IDE for JavaScript and related technologies.
WebStorm: The JavaScript and TypeScript IDE, by JetBrains
Make development more productive and enjoyable with WebStorm, the IDE for JavaScript and related technologies.
WebStormはHTML(5)+CSS+JavaScript等をメインに扱う、Windows, Mac OS X、Linuxのクロスプラットフォームに対応したIDEです。 これを読む前に以下の文章を見ておく必要があります 最強のJavaScript IDE 「WebStorm」を使ってみた | Web scratch この記事はWebStorm1.0の頃にかかれたものです。 横浜JSTDDハンズオンでWebStormについて発表してきた | Web scratch WebStorm指南書 この記事はWebStorm 4.0 EAPの時に書かれたものです この記事は、WebStorm 1.0 から WebStorm 5.0までの変更や追加機能等を最強のJavaScript IDE 「WebStorm」を使ってみたをベースにまとめたものです。 購入方法 既に購入済みな方などは飛ばして大丈夫で
JavaScript対応のIDEをまとめてみたの続きのようなもので、その中で紹介していたWebStormが素晴らしいので別途紹介。 WebStormはHTML(5)+CSS+JavaScriptに対応してるIDEで、Windows, Mac OS、Linux上で動作します。 有料のソフトウェアですが、オープンソースライセンスがあったり体験版は45日間使えるのでとりあえず試してみましょう。 この記事の続編(アップデート版)を書きました 特徴 とにかく膨大な機能が載ってるので全てを紹介するのは無理があるため、凄いと思ったところを掻い摘んで紹介。 主にJavaScriptを書くエディタとして使っていますが、CSSやHTMLも普通のIDEより書きやすいです。 基本的にWebStormで日本語に関する問題は少なめです。一部IMEの変換候補が出てくる場所がずれたり、プラグインで日本語がダメだったりする
先日、Visual Studio Code Remote Developmentが発表されました。これを使うと拡張機能や実行環境をリモートで完結きます。 NuxtでVSCode Remoteを使うメリット ローカル環境にNode.jsやyarnをインストールせずに開発でき、ローカル環境を一切汚さずに開発できる。 Node.jsのバージョン管理をしなくてよくなる。 拡張機能をリモート環境に事前にインストールできるため、一緒に開発する人の環境を統一できる。 ESLintやPrettierやデバッグ環境の設定を個々人で設定しなくていい。 パッケージをインストールするとき、OS依存パッケージを考慮しなくていい。 Dockerが使えるのでCI/CD環境と開発環境が統一でき、k8sやCloud Runにデプロイするときも楽。(AppEngineやCloud FunctionsもVSCode Remot
最強のJavaScript IDE「WebStorm」の姉妹品「PhpStorm」はPHP IDEとして最高だった ::ハブろぐ
先に「WebStorm」について軽く言及 【コラム】イマドキのIDE事情 (94) 最強のJavaScript IDE「WebStorm」を試してみる | エンタープライズ | マイコミジャーナル 最強のJavaScript IDE 「WebStorm」を使ってみた | Web scratch 最強と称したのは自分じゃないのですが、「WebStorm」は最強らしいです。最強な割に、AptanaとかKomodo等と比べるとマイナー感が溢れているのですが、気のせいでしょうか。 WebStorm自身、いつの間にかJavaScript向けのIDEということになっていますが、実際はWebフロントエンド全般に適したIDEです。そのため、HTMLやCSSについても、優秀な機能を備えています。とはいえ、HTMLやCSSだけを取り扱う場合はIDEが縁遠い気もするので、実質JavaScriptでゴリゴリ開発す
JavaScriptのプログラミングはこれだけ効率化できる！ 使用歴5年目のエンジニアが送るWebStormの厳選神業集 JavaScript（ES2015+）、TypeScriptの需要は高まる一方ですが、プログラミングの効率化をどれくらい意識していますか？ プログラミングが効率化されれば、作業時間の短縮、ケアレスミスの軽減、プロダクトの品質の向上、そしてストレスの軽減に繋がります。 筆者が5年間使用している「WebStorm（ウェブストーム）」は、JavaScriptのプログラミングをする上での面倒な処理をほとんど自動化するための機能が揃っていて、ロジックの検討や表現の作り込みに時間を割けるようになります。 本記事では、多くの機能の中からとくに便利だと感じるものをピックアップして紹介します。WebStormを使ったことがない方も、「この作業はツールで自動化できるのか」という知識を得て、
Qiita JavaScript - Client Side - Advent Calendar 2013 12月20日の記事です。 みなさんはJavaScriptをどんなエディタで書いていますか？僕はこれまでVimで開発していたんですが、最近はもっぱらWebStorm(PhpStorm)を使ってJavaScriptを書いています。 というわけで今日はWebStorm使ったJavaScript開発における便利な機能をいくつか紹介していきます。 Inspections Code Completion JSDoc File Watchers Deployment(Automatic Upload) REST Client Directoies JavaScript Libraies Code Style ファイル検索 Vim Plugin Look and Feel WebStormとは？ J
WebStorm指南書
HTML/CSS/JS 対応のIDE JSON/Node/CoffeeScript/SCSS/LESS/HAML Windows/Linux/Mac クロスプラットフォーム対応 Jetbrains製のIDE Intelli J,PHPStorm, RubyMine, AppCode などの姉妹品 $69 $49 / 年間 (2012年2月中) 1年間有効でその間のアップデートは無償 シェアウェアだが使う価値がある
みなさんはウェブサイト制作で、どのテキストエディターを使用していますか？ 弊社ではHTMLやCSS、JavaScriptを扱うウェブ制作ソフトとして「WebStorm（ウェブストーム）」を全スタッフが利用しています。WebStormは有料のソフトウェアですが、日本語に対応しており、ウェブ制作に役立つ機能が豊富に搭載されていて値段以上の価値があります。 今回はWebStormの魅力について、「WebStormの概要」、「ウェブ制作に便利な使い方」、「コードリーディングに重宝する機能」、「コーディングの助けになる機能」の4点から紹介します。 ※本記事はWebStormの内容ですが、開発元のJetBrains社が提供しているIntelliJ IDEAやPhpStorm、その他のIDE（統合開発ソフト）で同様のショートカットや機能を使用できます。 本記事は初心者向けの内容ですが、続編記事「使用歴5
【コラム】イマドキのIDE事情 (94) 最強のJavaScript IDE「WebStorm」を試してみる | エンタープライズ | マイコミジャーナル
JavaScriptのIDE事情とWebStorm Ajaxの普及と共にJavaScript向けのIDEとしてAptanaや、EclipseのJSDTなどさまざまなものが登場してきた。こしかし、「これが決定版」と呼べるIDEは存在しなかったのが実情だ。 WebStormはIntelliJ IDEAでお馴染みのJetBrains社が提供するJavaScript向けのIDEで、他のJavaScript向けIDEと比べ、非常に優秀なコード解析機能や補完機能を備えており、現在存在するJavaScript向けIDEの中では頭一つ抜けた存在といえる。有償の製品ではあるものの、45日間は無料で使用が可能だ。また、オープンソース開発者には無償でライセンスが提供されている。 図1 WebStormのスプラッシュスクリーン 優秀なコード解析・補完機能 JavaScriptは柔軟な記述が可能なため、IDEによっ
[PhpStorm/WebStorm]jQueryの非効率な使い方をすると警告してくれるようになった | バシャログ。
iOS6 のマップって不便って騒がれたけど、それほどでもないよね？…って思ってましたが、最近お店探しで使って全然見つからなかったので、さすがにこれは…と思いMapion インストールしました。使いやすいですね… 今日は、だらしない明らかに非効率なjQueryなコードを書くとやんわりと指摘してくれるPhpStorm/WebStormの機能「Inspection: jQuery usage efficiency 」を紹介します。(バージョン5.0以降) New JavaScript inspections and intentions | WebStorm & PhpStorm Blog 非効率なjQueryのコード っていったいどんなコードなのか。具体的には以下のようなコードです。 $("p").addClass('hover'); $("p").toggle(); 実際にはこんなコードを書
![[PhpStorm/WebStorm]jQueryの非効率な使い方をすると警告してくれるようになった | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b62b4e0fd4ed08a00e42d880ceb27ae1f776b93/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fws_ps01.jpg)
2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケートのインサイト | The WebStorm Blog
JetBrains は過去 7 年間にわたり、変化し続ける開発者の状況と使用されている主要テクノロジーを関連付けるために開発者エコシステムアンケートを実施してきました。 その結果は生データと分析レポートの両方の形式でコミュニティと共有され、すべての関係者がこのエコシステムの状況を把握できるようになっています。 本日は今年の調査結果を JavaScript と TypeScript に焦点を当てて確認したいと思います。 アンケートの概要 2023 年の開発者エコシステムアンケートでは、世界中の 26,348 人の開発者からインサイトを収集しました。 このアンケートの結果を自分で確認し、プログラミング言語やツール、テクノロジーから回答者に関する有用な情報や豆情報に至るまで広範なトピックを網羅した情報を入手できます。 私たちは開発者独特のライフスタイルにも注目し、その情熱や興味を明らかにする予定
WebStorm、PhpStorm、RubyMine、PyCharm、IntelliJ IDEA、AppCodeなどでコードをなるべく楽に綺麗に書くための機能紹介 3つ #jbugj – yusuke.blog
コツなんて必要ありません。普通にIntelliJ IDEAを初めとするJetBrains IDEでコードを書いていれば綺麗になります。 1. コードフォーマット 特にプラグインとか入れる必要はない。最初からScala、Java、ActionScript、CFML、CoffeeScript、CSS、Groovy、HAML、HTML、JavaScript、JSP、LESS、SCSS、SQL、TypeScript、XML、Yamlなどのコードフォーマッタが入ってる。 ショートカットはOpt+Cmd+L(設定によっては違う)。しかるべきところでの改行と、インデントをまとめてしてくれるのでたすかります。 べつにショートカットを押さなくてもコミット時にフォーマットをかけさせられるのでコーディング時は意識しなくていい。 コミットダイアログ(Cmd + K)ではReformat code、Rearrang
WebStormでKarma+Mocha+power-assertのjavascriptテスト環境を作る - Qiita
npmでパッケージを揃える グローバル npm install -g grunt-cli bower プロジェクト環境 npm プロジェクトルートに以下のpackage.jsonを置いてnpm installするとパッケージが揃います { "engines": { "node": ">= 0.10.0" }, "devDependencies": { "grunt": "~0.4.2", "karma-mocha": "^0.1.3", "karma-phantomjs-launcher": "^0.1.4", "grunt-espower": "^0.6.0", "grunt-karma": "^0.8.2" } } bower bower install power-assertでpower-assertと依存パッケージがインストールされます。 Grunt設定 プロジェクトルートにGr
WebStorm(IntelliJ) は JetBrains という会社の製品です。（有料です！） ダウンロードは下記アドレスをご覧ください。 JetBrains だいたい名前でわかると思うのですが言語ごとに別々の製品になっています。 下記のスライドがわかりやすいです。 簡単にご説明すると、HTML / JS だけ開発できればいい人は WebStorm PHP を開発したいひとは PhpStorm（WebStormの機能も含まれる ） もし、2つ以上の言語（PHP と Ruby など）を使用したい場合は PhpStorm + RubyMine じゃなくて IntelliJ を購入した方がお得です。 （IntelliJ は Java 用かと思いきやすべてのWeb系パッケージが含まれています。） IntelliJ は Java 以外の言語をプラグインという形で提供しているので、新しいバージョン
WebStorm/PhpStorm（というかJetBrains製のIDE全般）には多彩なバリエーションの差分抽出（Diff）機能が搭載されているのだけど、あまりにも多彩なのでいったんまとめてみることにした。 まとめてみた結果、これはもう外部の差分抽出・マージ専用ツールは不要だなと思えるほど充実していた。 もくじ 特定の2つのファイルを比較する 現在開いているファイルと、特定のファイルを比較する クリップボードの内容と、ファイルを比較する クリップボードの内容と、ファイル内の特定領域のテキストを比較する 特定の2つのディレクトリを比較する リモートファイル（サーバー上にあるファイル）と比較する リモートファイル（サーバー上にあるファイル）と複数ファイル同時に比較する ローカル履歴と現在のファイルを比較する Gitのブランチどうしを比較する 現在開いているファイルと、Gitの別ブランチにある当
『巷で話題のWebStorm』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 スマートフォン版Amebaで、フロントエンドの開発をしている2012年度新卒入社の鈴木と申します。 スマートフォン版Amebaではこれまで弊社ブログでも紹介された通りchikuwa.jsでクライアントサイドを、node.jsでサーバサイドの開発をしております。 そこで今回はJavascriptを用いた開発でメリットがあるWebStormの機能について、私が業務を通して便利と感じた点を紹介させていただきたいと思います。 WebStormとは WebStormはJetBrains社が有償で販売している*IDE（統合環境開発）で、Windows/Mac/L
JetBrainsの Web開発 IDE*1、WebStorm 8.0がリリースされました。 WebStromもTypeScriptに対応しているという話は聞いていたのですが、WebStrom自体をほとんど使ったことがありませんでした。 先日8.0がリリースされたとのことなので、せっかくなので、手探り状態ですが少し試してみました。 WebStormの入手とセットアップ WebStormは有償の製品ですが、30日間の試用ができます。 試したい方は以下から自分のプラットホーム向けのものをダウンロードしてセットアップしましょう。Win/Mac/Linux用があります。 http://www.jetbrains.com/webstorm/ （なお、ライセンスを購入される場合はサムライズムさんが正規代理店として取り扱っておられますので、こちらを参照のこと。WebStormはJetBrains製品の中
WebStorm9のEAPが始まり、目玉機能の一つに「Spy-jsのNode.jsトレース」が掲げられていますが「そもそもSpy-jsって何なの？」っていう方も多いと思いますので、今更ですがWebStorm8のSpy-jsと使い方をおさらいしておこうと思います。 なお、この記事の内容はWebStorm公式ブログを参考にしました。動画もあるのでぜひご一読ください。 Spy-jsとは？ Spy-jsはJavaScriptの トレース、デバッグ、 プロファイリングの3つの機能から構成されるツールです。Spy-jsはWebStorm, PhpStorm, RubyMine, PyCharm(Professional), IntelliJ IDEA(Ultimate)にバンドルされていますが、スタンドアロンで動くものも配布されています。WebStorm8ではWebアプリケーションだけですが、WebS
横浜JSTDDハンズオンに参加してきて、WebStormというIDEはどういうものなのかについて発表してきました。 WebStorm指南書 発表してきた資料置いておきます。 後から資料として見やすいように画像をたくさん入れながらWebStormの機能紹介について書いたので、WebStormについて知りたい方は読むといいです。 また、最近出たばかりのWebStorm 4.0 Early Access Programについても書いてあるので興味がある人はどうぞ。 スライドの見方 スライドは上記のように機能の紹介がベースで、それの利用方法やこういう機能があって便利という感じのスライドになってます。 WebStormの楽しさ Web開発等JavaScript周りの環境も変化してきているので、それにあわせてエディタやIDEももっと変化するといいなーと思う部分にいろいろ挑戦してる感じがしてるのがWeb
ここのところ、Nuxt.jsを試しているのですが、PhpStorm環境でコーディングしていると、コード中にESLintからのエラーメッセージがあふれます。 敬愛するPhpStormさんなら、ReformatショートカットでESLintのフォーマットでReformatしてくれるかと期待しましたが、残念ながら適用されず。 ESLintフォーマットで調整したものをうっかりReformatしてしまうと、ESLintフォーマットが破棄されてPhpStormで設定しているフォーマットでRefomatされてしまします(´・ω・`；) なんとか、ESLintでReformatしてくれないものかと、情報を探していたら、以下のページを見つけました。 How to make WebStorm format code according to eslint? 以下、ESLintフォーマットでReformatしたい
正宗です。ものすごく今さらな事を知ったのでおおはしゃぎで書き留めておきます。いかに今までまともにJSDocを書いていなかったか。 私が主に JavaScriptを書くときに使っているWebStormでJSDocをきちんと書くようにすると、JavaScriptの型をなかなか強力にサポートしてくれるようになりました。コードの補完機能なんかもかなり精度が上がってくるので、結果的にコーディングも速くなるのではないでしょうか。 私は特に普段はActionScript3を書く機会が多く、ご存じのとおりActionScript3は型を明示できる言語なのでFlashBuilderやFlashDevelop、FlashCS5などのIDEに備わっている補完機能に頼り切ってコーディングしていました。そのスタイルのままJavaScriptのほうの開発を行うと、今まではJavaScriptで厳密に型を明示できないこ
TypeScript も使いたかったので Node.js 開発環境として WebStorm を使おうとしたのだけれど、色々はまった。 ちゃんと外部ライブラリが require できて、補完等の IDE の恩恵も受けられるようにするためにはデフォルトのままではダメで、色んな場所で色んな設定が必要だった。JetBrains本家の資料でも記述がばらけていて整理されてなさげだったのでここにまとめておく。 サーバが起動しなかったり、そんなメソッドねーよとか怒られる場合は、たいてい 2-2〜2-4 の設定が外れてることが多いのでことあるごとにチェックしませう。 1. NVM で Node.js をインストール NVM の GitHub ページを参考にインストール。 $ curl https://raw.githubusercontent.com/creationix/nvm/v0.18.0/insta
AngularJSで使われてるTestacularではWebStormからテストを実行してデバッグする事を想定した作りになっています。 (AngularJS自体もJetBrains Plugin Repository :: AngularJSプラグインがあります) Testacular – Spectacular Test Runner for JavaScript WebStorm Testacular Documentation — Testacular 0.2.1 documentation 公式のデモ動画(Testacular – JavaScript Test Runner – YouTube)でもWebStorm Integrationが紹介されていますが、 ちょっと古くて設定が変わってる(一応キャプションで補足入ってる)のと分かりにくいので、その部分だけ抜き出して紹介します。
WebStormを使った快適Web開発のススメ
こんにちは。制作部の苅部です。 今回WebStormというIDEついてご紹介したいと思います。 私自身これまでエディタとしてSublime Textを使っていてIDEを触ったことがなかったのですが、実務の中でWebStormを試す機会があったので、備忘録も兼ねて便利な機能をまとめてみたいと思います。 私のように選ばずに一つのエディタを使い続けてきた方に向けて、WebStormの実際に使ってみないと分からない部分を簡単にご紹介できたらと思います。 IDEと聞くと敷居が高く感じるかもしれませんが、使いこなすと手放せなくなると思います。 エディタやIDE選択の一助となれば幸いです。 WebStormとは チェコ共和国のプラハに本社を置くJetBrainsというソフトウェア会社が開発しているIDE(統合開発環境)です。 同社が開発しているIntelliJ PlatformをベースにWeb開発に機能
数日、バタバタと調査しては考えが変わる毎日ですが、ES6-classでReactアプリを書く前提が整ってきました。 classボディ外に、propTypes/contextTypes/childContextTypesを書くのも、そういうものと思えばまあいいか MixinはAOP的なラッパーコンポーネントを生成する関数で書く。移行もすでにES6記法で書いてたのでさほど面倒ではない contextはES6-classでも大丈夫だった BabelでES5へトランスパイルし、Browserifyでクライアント用はまとめる。 テスト周りがちょっと試行不十分だけど、Jest&Babel&Gulpで簡単なものはOK おそらく最後にして最大の課題はIDEのことです。コード的にはOKでもIDEがエラーや警告だしたり、逆に出すべきところで沈黙してたりすると書き方云々以上にストレスですから。今、私はWebSt
PhpStorm / WebStormを布教したいと思いつつ、PhpStormを使っているtanakaです。今日は、JavaScriptのプログラムを書くのを楽にするコードテンプレート機能(JetBrains製品ではLive Templateと言います)の解説をします。WebStormでももちろん使えます。 Live Templateを使うとこんな風に便利 たとえば、jQueryのコードを書いていて、次のようなコードを書きたくなったとします。 $('#target').click(function () { // awesome effect }); $('#target').click の部分は毎回違うのですが、function () { ... }てのは毎回一緒ですね。私はこの部分を"af[Space]"の3回タイプで呼び出せるようにしています。つまり、 ここで af[space] と
PHPStorm/WebStormプラグインはまだ余り数がないので拡張性はそこまで高くないのですが(JetBrains製IDEで互換性があれば良いのに)、幾つかプラグインを入れてるので紹介 プラグインはSetting->Pluginから検索すれば全部出ると思います Markdown 名前の通りMarkdown記法のシンタックスハイライトに対応するプラグイン。 WebStorm内でプレビューも行えるため、Githubのreadme.mdを書くときにものすごく便利 デフォルトだとFile Typeに*.mdがないため(今は入ってるかもしれない)、mdファイルを開いても有効にならないことあるので、File Typeで*.mdがを追加すると有効になる。 FavoriteFolders WebStormはJava製なためかファイルダイアログがOS標準とは違うため、目的のフォルダまで移動するのが面倒く
リガチャ（合字）を使ってコードをかっこよくしよう -WebStorm・IntelliJ IDEA編- - Qiita
プログラミングコードには多くの記号が必要です。例えばJavaScriptでは、２つの値が同じかどうかを比較する等価演算子として、=を２つ並べて次のように記述します。 コードを読む場合、 =という文字が、=単体の意味なのか、==と繋がるのか、脳内で判断をするストレスがあります。 これに対し、1つの意味を1つの文字で表してコード全体の可読性向上を図るのが、リガチャ（合字）です。リガチャを用いると、前述の等価演算子と関係演算子は下記のように記述可能です。 IntelliJ IDEAやWebStormではリガチャを使用可能 JetBrains製のIDEであるIntelliJ IDEAやWebStorm等の2016.3では、リガチャを用いることができます。記号と文字を一対一で対応させることができるので、すっきりとコードを記述可能です。 リガチャの設定方法 リガチャは全てのフォントで使えるわけではなく
いままでVim → NetBeans と使ってきましたが、 WebStorm / PhpStorm というIDEがすごいらしいので試してみました。試用してみた結果PhpStormをメインで使うことにしました。 PhpStorm / WebStorm はJetBrainsという会社がリリースしている有償の IDEです。試してみて、JavaScriptコード編集機能の優秀さに感心しました。この記事ではどんな機能をもっているかをスクリーンショットつきで、さわりだけ紹介します。(PhpStormはWebStormにPHPエディタ機能などが付いた上位版なので、以下WebStormと表記して紹介いたします。) グローバル変数とローカル変数が区別される JavaScriptのコードを書く、保守するときに大切なことの一つに、「グローバル変数をなるべく使わない」があります。WebStorm はシンタックスハ
TitaniumのIDEとしてWebStormを使う(+補完機能の追加方法の紹介) - Seasons.NET
Titanium Mobileみなさん使ってますか？ ちょっとしたツールを作る時やwebサービスとの連携アプリを 作る時はむちゃくちゃ便利で、現在私も使いまくってます。 Titanium Mobileアプリを作る際に一緒にダウンロードする Titanium Studioは、eclipseベースで拡張されたIDEなのですが、 補完機能がちょっといまいち。。。 シンタックスカラーもデフォルトだとシンプル過ぎるんですよね。 なので、私はどうしているかというと、 JetBrains社が開発販売しているThe best JavaScript IDE with HTML Editor for Web development :: JetBrains WebStormというIDEを使っています。 人によっては、IntelliJを使っている方もいらっしゃるかもしれません。 IntelliJ含め、WebSt
チームで開発しているとIDEの設定を共有したくなりますよね。 ならないとしたら、今すぐこの記事を読むのをやめて病院に行って下さい。 バージョン管理する対象に.idea/以下を含める http://devnet.jetbrains.com/docs/DOC-1186 下記の「設定をエクスポートしてインポート」より良い方法として、プロジェクトの.ideaディレクトリ以下をバージョン管理対象に含める方法がありました。 Mavenで管理する → ダメだった eclipseにはmaven-eclipse-pluginという設定ファイルを生成してくれたりする便利なMavenプラグインがあります。WebStormにも似たものがないか探しました。で、あったにはあったのですが、codestyleなどの設定ファイルは作ってくれないみたいで目的に合いませんでした。 設定をエクスポートしてインポート → できた
正宗です。 今日はタイトルのとおりFlashみたいにパブリッシュしたら、自動的にCoffeeScriptやSassがコンパイルされて書き出される環境を、WebStormとCakefileを使って構築してみることにしました。 どういうことか順を追って説明しますね。 先ずは次のリンク先を読んでください。 FlashでいうパブリッシュのないHTML開発で、死なないためにやっといたらいいんじゃない的なこと。〜Ctrl+Enter Again〜 スーパー肩パッドさんがF-siteで発表した資料をまとめたものなんですが（俺もいきたかった〜！）ものすごくわかりやすくてものすごくためになります。 公開した瞬間から話題になったので もうすでに読んだ方のほうが多いと思いますが、まだ見の人がいましたらぜひ見でおねがいします。僕は百回読みました（本当は8回くらいかもしれない）。 で、僕の今回のこの記事は、上で紹介
Today Paul Campbell asked on Twitter about the possibility of having an automated testing scenario using WebStorm and Mocha. Although there’s nothing built in to WebStorm to support this, it’s actually very simple to setup. All we need are a few bits and pieces: - Mocha. A testing framework for node.js. I’ve been using it for some time and it’s quite decent. It’s from the same guys that have broug
WebStormのデバッガをBuster.JSのテスト実行時に使う方法についてです。 最初に要約を書いておくと buster static で静的なURLのテストページを用意する WebStormのデバッガ(ブラウザ)でそのURLを開く です。 WebStormのデバッガは、デバッガ連携できるブラウザ(ChromeとFirefox)で指定したURLを開いてデバッガを使う感じ 以前、Testacularを使った場合を紹介しましたが、TestacularはちょっとWebStorm向けに小細工が用意されてる感じなので、 今回のほうがもう少し一般的な感じの内容になると思います。 やっていること自体は下記の記事で解説されているのと同じで、ちょっとパスが違ったり使うコマンドが違う感じなだけだと思います。 WebStormからtestacularでテストとデバッグをする方法 | Web scratch
WebStormとPhpStormというIDEがあるのですが、この IDEはSassをサポートしていて、ハイライトなんかもしてくれます。 ただSCSSファイルをコンパイルするのにコマンドプロンプト立ち上げるのめんどくさいなーと思ってなんとかできないか調べてみました。 参考にしたのはこの記事です。 Easy SASS compilation in WebStorm / PhpStorm | Richard Tuin’s mindspins ただ、これの通りにやっても上手くいかなくて、前回は諦めましたが、今回は上手くいったのでやり方をメモしておきます。 まずはRubyとSassをインストールして、Sassが使える状態にします。インストール方法なんかは検索すればいっぱいでてきます。 準備ができたらWebStorm（PhpStorm）の設定をします。 SettingsからExternal Tool
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
WebStorm 7 EAP がリリースされましたが、今まではJsTestDriverぐらいしかテスト連携のサポートは入っていませんでしたが、karmaのサポートが追加されました。 KarmaとWebStormの設定 まだ、karma@canary(いわゆるdevloperバージョン)でしか動かないらしいので、 以下のように karma のcanaryをインストールします 今回は、デフォルトのJasmineの構成にしました。 次にWebStormでプロジェクトを開いて、WebStormのkarmaの設定をします。 RunDebug Configurationsにkarmaが増えているのでそれを追加して、 karma.conf.js のパスを設定してあげればWebStormの設定は完了です。 Karmaのテストを実行 作成したConfigurationsをRunするとKarmaサーバが起動し
WebStormは常に開発をより楽しくする最新のテクノロジやツールをサポートしています。WebStorm 7において中でも大きなのはKarmaのサポートです。KarmaはAngularJSチームが開発しているJavaScriptをテストするためのシンプルでフレキシブルなツールです。 これまで通りJSTestDriver(詳しい解説はこちら(英語) )も利用できます。 WebStormのKarma連携の主要機能は以下の通りです: ローカルWebサーバを使い、コンピュータにインストールされている任意のブラウザでテストを走らせる Jasmine、QUnit、Mochaなど、好きなフレームワークと組み合わせてテストできる istanbulコードカバレッジエンジンと一緒に動かせる 全体を説明するビデオ(英語)を用意しましたので是非ご覧ください。また、チュートリアル – Running JavaScr
全然Hotな話題ではなくなりましたがiPhone5をようやく手に入れました。LTEは速いです。リリースから1ヶ月以上経っていて、同じバシャログ。メンバーから「あ、まだ手に入れてなかったんだ」的な目で見られた…などということはありません。 本日はまだまだマイナーなWeb系IDE WebStorm / PhpStormの便利機能 LiveEditを紹介します。 LiveEditとはどんな機能か PhpStorm 5.0で組み込みの機能になったもので、もともとは"Instant HTML Editing" プラグインと呼ばれていたものだそうです。大きく分けて2つの機能があります。、1つ目はHTML/CSS/JavaScriptの修正を即座にブラウザ表示に反映させる機能、2つ目は、エディタのカーソルがある位置の要素をブラウザ上でハイライトさせる機能です。現時点ではChrome専用です。文で説明する
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
改めて最強のJavaScript IDE 「WebStorm」についてまとめてみた(改訂版)
最強のJavaScript IDE 「WebStorm」を使ってみた
【VSCode Remote】10秒でNuxt環境を構築【脱WebStorm】 - Qiita
JavaScriptのプログラミングはこれだけ効率化できる！ 使用歴5年目のエンジニアが送るWebStormの厳選神業集 - ICS MEDIA
WebStormによるJavaScript開発のすすめ - maru source
ウェブ制作にはWebStormがお勧め！ 使いこなせば操作が爆速になる機能のまとめ - ICS MEDIA
WebStorm（IntelliJ）で快適HTMLコーディング
WebStorm/PhpStormが備える差分抽出（Diff）機能まとめ
WebStorm 8.0でTypeScript開発を試してみた - きよくらの備忘録
WebStorm+Spy-jsの使い方 - Qiita
横浜JSTDDハンズオンでWebStormについて発表してきた
PhpStorm(またはWebStorm)でESLint設定でリフォーマットしたい時の設定メモ - mlog
今さらながら知ったWebStormとJSDocの深〜い関係 – 宇都宮ウエブ制作所
WebStorm の Node.js 開発環境を構築する - Qiita
WebStormからtestacularでテストとデバッグをする方法
WebStormでESLintを使う - まさたか日記
WebStorm (PhpStormでも可)のコードテンプレート機能を使う | バシャログ。
今使っているWebStormプラグイン
(IDEの話) PhpStorm / WebStorm を試してみた | バシャログ。
WebStormの設定を共有する - Qiita
パブリッシュでCoffeeScriptやSassが書き出されたりする環境をWebStormとCakefileで構築 – 宇都宮ウエブ制作所
Automating Testing with Mocha and WebStorm
WebStormのデバッガでBuster.JSのテストをデバッグをする方法
WebStorm/PhpStormからSassをコンパイルする
WebStorm 3.0: JetBrainsは、さらに完成度の高いJavaScript IDEを提供する
WebStorm 7EAPのkarma連携について
WebStorm 7を使いJavaScript テストをKarmaで動かす | Post Blog
ブラウザのリロード要らず？ WebStorm/PhpStormのLiveEdit機能 | バシャログ。