WebStormでESLintを使う - まさたか日記
数日、バタバタと調査しては考えが変わる毎日ですが、ES6-classでReactアプリを書く前提が整ってきました。 classボディ外に、propTypes/contextTypes/childContextTypesを書くのも、そういうものと思えばまあいいか MixinはAOP的なラッパーコンポーネントを生成する関数で書く。移行もすでにES6記法で書いてたのでさほど面倒ではない contextはES6-classでも大丈夫だった BabelでES5へトランスパイルし、Browserifyでクライアント用はまとめる。 テスト周りがちょっと試行不十分だけど、Jest&Babel&Gulpで簡単なものはOK おそらく最後にして最大の課題はIDEのことです。コード的にはOKでもIDEがエラーや警告だしたり、逆に出すべきところで沈黙してたりすると書き方云々以上にストレスですから。今、私はWebSt
WebStorm の Node.js 開発環境を構築する - Qiita
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
WebStorm9の新機能(Deep Dive into WebStorm 9's New Features) - Qiita
先日9.0.0にアップデートされたWebStormの新機能についてJetBrainsの中の人が生放送で解説するウェビナー、「Deep Dive into WebStorm 9's New Features」が、10月30日17:00-18:00(日本時間10月31日2:00-3:00)に開催されました。その中で紹介された新機能・Tipsと質疑応答の中から興味深いものをまとめます。 ウェビナーの様子は近日中に動画がアップされます。 [追記] 公式ブログに動画と記事が投稿されました http://blog.jetbrains.com/webstorm/2014/10/webinar-recording-a-deep-dive-into-webstorm-9s-new-features/ React and JSX 最初に紹介された新機能はReactとJSXについてです。 ReactはUI構築の
WebStorm 9 EAP, 138.2406: spy-js code completion, CSS3 enhancements, Scratch files and... JSX | The WebStorm Blog
Early Access Program WebStorm 9 EAP, 138.2406: spy-js code completion, CSS3 enhancements, Scratch files and… JSX It’s been some really busy weeks for the WebStorm team. And now it’s time for the next WebStorm 9 EAP build and more new features. And some of them are huge! Here is just a quick overview: – spy-js powered code completion and magnifier – ES6 support in spy-js – CSS3 support enhancements
WebStorm+Spy-jsの使い方 - Qiita
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
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、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 9 - Spy-js for Node.js: tracing, debugging and profiling Node
WebStorm 8 brought us support for Spy-js, a tool for tracing, debugging and profiling our front-end JavaScript applications. WebStorm 9 adds Spy-js for Node.js, so we can trace, debug and profile our server-side JavaScript as well. In this video, we'll see how this works.
WebStorm 9 EAPがリリースされています
WebStorm 9のβ版とも言えるWebStorm 9 EAPがリリースされています。 WebStorm 9 EAP - WebStorm - Confluence ここからダウンロード WebStorm 9 EAP is Open! | JetBrains WebStorm Blog 変更/改善点 WebStorm 9 EAP is Open! | JetBrains WebStorm Blog に変更点などが書かれていますが、 Node.js向けの改善が結構あります。 Live EditのNode.jsアプリ対応 以下で詳細が書かれていますが、Node.jsのアプリについてもファイルの変更も検知して、 Nodeアプリの再起動的な事をやってくれるみたいです。 Live Edit Updates in WebStorm 9 — What’s New? | JetBrains WebSto
Guide to Node.js Development With WebStorm | The WebStorm Blog
In this short blog post we would like to put together all the tutorials we have so far on Node.js development workflow with WebStorm and other JetBrains’ IDEs. Hope that it would help you to get started with Node.js in WebStorm and master your workflow. Running and Debugging Node.js apps Getting started with Express Debugging Express apps Working with Jade templates in Express app List of availabl
Spy-js: WebStorm Secret Service | The WebStorm Blog
IDEs AppCode CLion DataGrip DataSpell Fleet GoLand IntelliJ IDEA PhpStorm PyCharm RustRover Rider RubyMine WebStorm Plugins & Services Big Data Tools Code With Me Quality Assurance JetBrains Platform Scala Toolbox App Writerside JetBrains AI Grazie Team Tools Datalore Space TeamCity Upsource YouTrack Hub Qodana .NET & Visual Studio .NET Tools ReSharper C++ Languages & Frameworks Kotlin Ktor MPS Am
WebStorm+Chromeでウェブサイトコードリーディング
IntelliJさんのChromeプラグインが進化してた – しおしおの雑記帳 を見て気づいた事。 今までは WebStorm -> JavaScriptデバッグ実行 -> Chrome起動 という方向でしか、WebStorm内のデバッガーは使うことが出来なかったのですが、 WebStorm 8 EAPからは、Chrome -> Inspect in WebStorm -> WebStorm という双方向でデバッガーを使えるようになったみたいです。 これを利用して、簡単にWebStormを使ってウェブサイトのコードを読むことができるのでその手順の説明です。 手順は単純で WebStormで適当なプロジェクトを開く(プロジェクトを開いてないと”Inspect in WebStorm”ができない) Chromeで読みたいサイトを開く Chromeのコンテキストメニューから”Inspect in
『巷で話題のWebStorm』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 スマートフォン版Amebaで、フロントエンドの開発をしている2012年度新卒入社の鈴木と申します。 スマートフォン版Amebaではこれまで弊社ブログでも紹介された通りchikuwa.jsでクライアントサイドを、node.jsでサーバサイドの開発をしております。 そこで今回はJavascriptを用いた開発でメリットがあるWebStormの機能について、私が業務を通して便利と感じた点を紹介させていただきたいと思います。 WebStormとは WebStormはJetBrains社が有償で販売している*IDE（統合環境開発）で、Windows/Mac/L
WebStorm & PhpStorm Blog日本語訳：WebStorm 6におけるFile Watchers（別名"Background Tasks"） - 448.jp blog
WebStorm & PhpStorm Blog日本語訳：WebStorm 6におけるFile Watchers（別名"Background Tasks"） ブログはできる限り書き続けたいと思っているのですが、仕事が忙しくなってくると途端に難しくなってしまいます。GWに向けてなぜか右肩上がりに忙しくなる予感がしているので、書けるうちに書いておきたいと思います。 さて今回は、WebStorm & PhpStorm Blogの「File Watchers in WebStorm/PhpStorm 6 (a.k.a. “Background Tasks”)」を日本語訳してみました。 それでは、どうぞ！ *注―JetBrainsの他のIDE（RubyMine、PyCharm、IntelliJ IDEA...）のユーザーは、この機能を使うためにFile Watchersプラグインをダウンロード、イン
WebStormでTypeScriptを使おう | DevelopersIO
WebStorm6がリリース 最強のJavaScript用IDEと名高いWebStromが、先日メジャーバージョンアップして6.0になりました。 いろいろな機能が追加されてます。 TypeScript coding support Debugging with source maps Convenient to use JS libraries Fresh IDE look and feel & dark UI 今回のバージョンアップでTypeScriptもサポートされました。 こんな感じでシンタックスハイライトもできますし、補完も効くようになってます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 WebStorm : 6.0 Node.js : v0.8.15 npm : 1.1.66 node管理ツール : nvm サンプル用ディレク
WebStormのデバッガでBuster.JSのテストをデバッグをする方法
WebStormのデバッガをBuster.JSのテスト実行時に使う方法についてです。 最初に要約を書いておくと buster static で静的なURLのテストページを用意する WebStormのデバッガ(ブラウザ)でそのURLを開く です。 WebStormのデバッガは、デバッガ連携できるブラウザ(ChromeとFirefox)で指定したURLを開いてデバッガを使う感じ 以前、Testacularを使った場合を紹介しましたが、TestacularはちょっとWebStorm向けに小細工が用意されてる感じなので、 今回のほうがもう少し一般的な感じの内容になると思います。 やっていること自体は下記の記事で解説されているのと同じで、ちょっとパスが違ったり使うコマンドが違う感じなだけだと思います。 WebStormからtestacularでテストとデバッグをする方法 | Web scratch
ブラウザのリロード要らず？ WebStorm/PhpStormのLiveEdit機能 | バシャログ。
全然Hotな話題ではなくなりましたがiPhone5をようやく手に入れました。LTEは速いです。リリースから1ヶ月以上経っていて、同じバシャログ。メンバーから「あ、まだ手に入れてなかったんだ」的な目で見られた…などということはありません。 本日はまだまだマイナーなWeb系IDE WebStorm / PhpStormの便利機能 LiveEditを紹介します。 LiveEditとはどんな機能か PhpStorm 5.0で組み込みの機能になったもので、もともとは"Instant HTML Editing" プラグインと呼ばれていたものだそうです。大きく分けて2つの機能があります。、1つ目はHTML/CSS/JavaScriptの修正を即座にブラウザ表示に反映させる機能、2つ目は、エディタのカーソルがある位置の要素をブラウザ上でハイライトさせる機能です。現時点ではChrome専用です。文で説明する
Validating JavaScript code with JSDoc types annotations | The WebIDE Blog
IDEs AppCode CLion DataGrip DataSpell Fleet GoLand IntelliJ IDEA PhpStorm PyCharm RustRover Rider RubyMine WebStorm Plugins & Services Big Data Tools Code With Me Quality Assurance JetBrains Platform Scala Toolbox App Writerside JetBrains AI Grazie Team Tools Datalore Space TeamCity Upsource YouTrack Hub Qodana .NET & Visual Studio .NET Tools ReSharper C++ Languages & Frameworks Kotlin Ktor MPS Am
WebStormからtestacularでテストとデバッグをする方法
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が紹介されていますが、 ちょっと古くて設定が変わってる(一応キャプションで補足入ってる)のと分かりにくいので、その部分だけ抜き出して紹介します。
改めて最強のJavaScript IDE 「WebStorm」についてまとめてみた(改訂版)
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」を使ってみたをベースにまとめたものです。 購入方法 既に購入済みな方などは飛ばして大丈夫で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
