ESlint で import を自動ソートする
import が増えてくると、その順序が気になってきます。 外部ライブラリからのインポートは上にあって欲しいし、reactからのインポートはさらに上に固定したくなりませんか？ ESlint のeslint-plugin-importというプラグインを使えば簡単にソートできます。 使うのはeslint-plugin-importのimport/orderというルールです。 設定も色々あって、ある程度の自由度で順序を決めることもできます。このルールは fixable なのでeslint --fixコマンドで自動ソートが可能です。 公式の解説もあるのですが分かりにくい個所や誤っている個所もあるためこの記事を作成しました。 ソートした例 早速eslint-plugin-importのimport/orderを使ってソートした例です。 上が下のようにきれいになります。 ソート後はreactからのイン
Integrating with Linters · Prettier
Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns, as outlined in Prettier vs. Linters. Luckily it’s easy to turn off rules that conflict or are unnecessary with Prettier, by using thes
@typescript-eslintでtypescriptのlintをeslintで行いつつ、airbnbの設定でいきましょう的なお話
typescriptを最近使い始めたわけで。 lintをするにはtslintが一般的だったんだけど、なんかeslintでもできるようになるよみたいなニュースもあったし、VSCodeのtslintのプラグインにdeprecatedっていう名前がつき始めるし。 ってことでtslintじゃなくてeslintでlintしちゃおうかな〜っていう。 で、さらにいつもeslintではairbnbでやってたから今回もairbnbでlintしたいなぁと。 ということで今日は@typescript-eslintを使ってeslintのairbnbをtypescriptにも適用しちゃおう的なお話をば。 ちなみについでにhooksのlintも入れてみましょう的な。 とりあえず入れておくべきnpmはこちら。 $ npm install --save-dev \ @typescript-eslint/eslint-pl
TypeScript on ESLint の未来 - Qiita
The future of TypeScript on ESLint:https://t.co/PTCWKWN22s — ESLint (@geteslint) January 18, 2019 ESLint の TypeScript サポートの今後について、公式にアナウンスがありました。 要点をまとめると、 TypeScript チームが TSLint から ESLint に切り替えていくと発表したよ。 ESLint チームと TypeScript チームが協力して開発を進める場として、typescript-eslint プロジェクトを開始したよ。 既存の部品は新しいプロジェクトの org に移動するよ (typescript-eslint-parser は @typescript-eslint/parser になる、等)。 という感じです。 以下は公式アナウンスの翻訳です。 数週間前、
EmacsでWebサービスを開発して8ヶ月が経ちました - エムスリーテックブログ
この記事はエムスリー Advent Calendar 2018 の16日目の記事です。 こんにちは、エンジニアリンググループ新卒1年目の青木です。クラウド電子カルテ「M3 DigiKar」の開発に携わっています。We are hiring!! 今回は私のチームが開発しているWebサービス「M3 DigiKar」の Emacs での開発方法を紹介します。 皆さんお馴染みのエディタ Emacs はじめに 共通設定 検索・補完・定義参照 company.el ivy.el & counsel.el & swiper.el dumb-jump.el Syntax Check & Lint flycheck.el Spell Check flyspell.el Visualize git-gutter-plus.el color-identifiers-mode.el rainbow-delimit
ESLint(あるいはTSLint)とPrettierを併用する - ひと夏の技術
[追記:] TypeScriptでESLintを使う方法も書きました tech-1natsu.hatenablog.com TSLintではなくESLintを使いたい方はこちらもあとで読んでみてください。 なお JS with ESLint TS with TSLint この構成をお求めの方は当記事(下記)です。 Prettier導入するにあたって色々絡み合うものがあるので調べたりしたことをまとめておく。 基本的にリントとフォーマッタのどちらか片方しか使わないという場面は、リリースを意識したプロジェクトではあまりないと思うので、実質この組み合わせは必須のようになってくる気がしている。 それで、Prettierとはなんぞや…JSのコードフォーマッタで、、というPrettierの概要についてはググればめっちゃ出てくるので省略。 この記事は導入したいけどなにをどうすればいいんやという人向け。 と
フロントエンドの未来の話 - Qiita
前置き 会社の勉強会資料になります（6/16発表） フロントエンドの未来の話というか、色々なライブラリの紹介です ほとんどが5月上旬くらいに書いた資料なので、 それ以降に変化があったライブラリについては、追記という形で資料の中にコメント入れてます モジュールバンドラーの未来 モジュールバンドラーとは簡単に言うと、JavaScriptのビルドツールのことです 最近はフロントエンドでも、機能ごと・共通化などの理由によって、JSファイルを分けてコーディングをするので、 最終的にそれをまとめて、1個のJSにする必要がある その時に使われるのが、モジュールバンドラー 有名どころのツール みんな大好きwebpack 後は、rollupとかbrowserifyとか ですが、、 これからの時代は fuse-box fuse-boxとは webpackと同様なモジュールバンドラー 設定ファイルがシンプル w
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
Airbnb JavaScript スタイルガイド() {
javascript-style-guide 常に気をつけたい、JavaScriptへの正しい接し方 View on GitHub Airbnb JavaScript スタイルガイド() { 元文書:https://github.com/airbnb/javascript 常に気をつけたい、JavaScriptへの正しい接し方 Note: this guide assumes you are using Babel, and requires that you use babel-preset-airbnb or the equivalent. It also assumes you are installing shims/polyfills in your app, with airbnb-browser-shims or the equivalent. 注意: このガイドはあなたがB
ESLint で ES6で書かれたReact のコードを検証する - Qiita
やりたいこと ES6で書かれた、Reactのコードを静的に検証したい。 この記事では、ESLint を使った例を紹介します。 以下の例は全てESLint v3.1.1 で実行しました。 インストール eslint, eslint-plugin-react モジュールを、local にインストールします。 設定ファイル(.eslintrc)を作成する 手動で設定ファイルを作成してもOKですが、eslint には設定ファイルを自動生成するコマンドがあるので、今回はこれを使います。 プロジェクトのルートディレクトリで node node_modules/eslint/bin/eslint --init を実行すると、例1が表示されます。 例1 $ node node_modules/eslint/bin/eslint --init ? How would you like to configur
ES6 + React + Redux + webpack な環境構築 - kotaroito's notes
ES6 + React + Redux + webpack なフロントエンド環境を構築するためのメモ。 packages.json npm install --save react react-dom react-redux npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react npm install --save-dev webpack webpack-dev-server react-hot-loader npm install --save-dev eslint eslint-plugin-react eslint-plugin-import { "name": "my-env", "version": "1.0.0", "description": "", "scr
ESLint v3.0.0 - Qiita
互換性のない変更 #4483: Node 4 未満のバージョンのサポートを終了 Node.js v0.10 は9月末、Node.js v0.12 は12月末でメンテナンス サポートが終了します (参考: https://github.com/nodejs/LTS )。これに先立って、ESLint では v0.10 と v0.12 のサポートを終了します。 ESLint 3 がサポートするのは Node.js v4 以上のバージョンとなります。 Node.js v0.10, v0.12 で ESLint を実行する必要がある場合は ESLint 3 へのアップグレードをお控えください。 Travis CI のようなツールで複数の Node バージョンでのテストを実施する場合、同じソースコードをすべての Node バージョンで ESLint によるチェックをする必要はないかもしれません。その場
[翻訳] Airbnb React/JSX Style Guide - Qiita
この翻訳について Airbnb React/JSX Style Guideの和訳です。 間違っていたり分かりにくい箇所があれば、ご指摘いただけると幸いです。 Airbnb React/JSX スタイルガイド このスタイルガイドは現在一般的に使用されている標準に基いていますが、場合によってはいくつかの慣例（async/awaitやstatic class fields）が含まれていたり禁止されていたりします。現在、このガイドにはステージ3より前のものは含まれておらず非推奨です。 目次 基本的なルール クラス vs React.createClass vs ステートレス ミックスイン 命名規則 宣言 アラインメント 引用符 空白 引数 参照 括弧 タグ メソッド 順序 isMounted 基本的なルール Reactコンポーネントは1ファイルに1つだけにしてください。 ただし、1ファイルに複数の
![[翻訳] Airbnb React/JSX Style Guide - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1254e38358c5c90719500a1b80c8ffd78476fcf7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEJTIwQWlyYm5iJTIwUmVhY3QlMkZKU1glMjBTdHlsZSUyMEd1aWRlJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0xYTY0ZTQwNmQ5MDEyYjBmY2JhNGE0OGVkNjMyMTVhMA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5YW1hZGFzaHkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTI1Mzg0MjVmMjMxMDk3OTY3YzYxOTA2YmFmZDVlMTJl%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dd9b5864c8ec3eb905404bd594cadec9c)
.eslintrc editor
{ "env": {}, "globals": {}, "ecmaFeatures": {}, "parser": null, "rules": {} }
ESLintの設定をscoped packageでnpmにあげて使い回す - Qiita
ESLintがv2にアップデートしてからけっこう変わって、だましだましv1系の設定をいじりながら使い続きてたけどだいぶカオスになってきたので気合入れて書き直した。 せっかく気合入れて書いたのでプロジェクトを横断して設定を共有できるようにしたい。 ESLintの設定を使い回すのはいくつか方法が考えられる。 プロジェクトごとにコピペする npmモジュールにしてextendする さらにnpmモジュールとして利用するのはいくつか方法があって、 eslint-config-hokacchaみたいにグローバルな名前でnpmにpublishして使う scoped packageとして@hokaccha/eslint-configみたいな名前でnpmにpublishして使う githubに置いといてnpm install hokaccha/eslint-configみたいにして使う たぶん1が一番メジャー
日経有料記事の類似記事を無料で読めるChrome拡張をES6+Webpackの最小構成でつくった - Qiita
require('babel/register'); module.exports = exports = [ require('./config/webpack'), ]; import config from './index'; const globals = config.get('globals'); const paths = config.get('utils_paths'); const webpackConfig = { entry: paths.src('entry'), output: { path: paths.project(config.get('dir_dist')), filename: 'main.js' }, plugins: [], module: { preLoaders: [ { test: /\.js$/, loader: 'eslint', i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - prettier/prettier: Prettier is an opinionated code formatter.
GitHub - amilajack/eslint-plugin-compat: Check the browser compatibility of your code
GitHub - mysticatea/eslint-plugin-node: Additional ESLint's rules for Node.js
GitHub - infofarmer/eslint-plugin-jsx-a11y
