サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
2025-03-30 追記: 改訂版を書きました. susisu.hatenablog.com ESLint v9 から Flat Config がデフォルトの設定ファイルの形式となり, 徐々に対応しているプラグインも増えて移行が進みつつありますが, 実際に移行したプロジェクトを見ているとしばしば勘違いなどから誤った設定をしている事例を目にします. ということで, Flat Config を書くにあたっていくつか知っておいて欲しいことや, よく見かけるミスをまとめてみました. この記事では網羅的な説明はしませんので, ESLint やtypescript-eslint の公式ドキュメントを前提として, 副読本的に参照してください. Getting Started with ESLint - ESLint - PluggableJavaScriptLinter Getting Star
どーも、入田 / ぐるたか @guru_taka です！本記事ではNext.js (TypeScript) を環境構築し、ESLint（読み方：イーエスリント）と Prettier（読み方：プリティア）を導入する方法を紹介します。Next.js のバージョン 11 に対応しており、デフォルトで搭載されている ESLint の設定ファイルをベースとしています。 ESLint と Prettier を駆使することで、コードが綺麗になるため、導入することを強くオススメしたいです。本記事では、VS Code 上で、ESLint で構文解析しながら、ファイル保存時に ESLint + Prettier によるコード整形する方法をハンズオン形式でまとめています。
はじめにReactとFirebaseを用いてフロントエンド開発するにあたって、追加で入れておきたい各種パッケージや設定を組み込んだ環境構築手順です。 この記事で構築する環境は以下の通りです。 ローカルで開発した内容をGitHubにpushすると、構文チェック→テスト→ビルド→デプロイされます。 また、mainブランチにpushしたらFirebaseの本番環境にデプロイされ、developブランチにpushしたらFirebaseの開発環境にデプロイされます。 事前準備 環境構築をするにあたって、以下は事前に準備してください。 VS CodeのインストールGitHubのアカウント登録 Node.jsのインストール 今回はv16.14.0を利用します Firebaseのプロジェクト作成GitHubリポジトリの作成GitHubのリポジトリを作成します。 公開範囲はPublic,Privat
ContentsBasic project setupThe basic setup consists of four steps:Create the project and source directoriesCreate a package.jsonGet a .gitignore, tsconfig.json, .eslintrc.jsInstallTypeScript & dependenciesNote: Thisguide uses yarn, but if you prefer npmit hassimilar commands. #Create project folder mkdir my-project cd my-project #Create source folder and files mkdir src touch src/main.ts sr
最近Next.jsを書くようになって、自分なりのコーディングスタイルが固まってきたので今後パパっとセットアップができるようにメモっておきます。 この記事では以下のことができるようになります。Next.jsをTypeScript / TSX で書く ESLintとPrettierとVSCodeを組み合わせ、保存時自動フォーマット importを相対パスではなく絶対パスで書く ServerをExpressで動かす 開発時は.envで、本番は環境変数によるアプリケーション設定値を扱う 【発展編】Kubernetesを見据えてDockerで動かすNext.jsをTypeScript / TSX で書く ※執筆時Next.js version: 9.1.1create-next-app コマンドで雛形を作ってもいいのですが、余計なものもくっついてくるのでスクラッチでインストールします。
今さらだけどメモ。 ESLint を使っているプロジェクトに Prettier を導入するときの設定方法。 結論としては、公式のこのページに全部まとまってた。 なお、 prettier-eslint というのもあるようだが調べていない。 先にまとめ eslint-plugin-prettier: ESLint と一緒に Prettier のチェックをしたい場合に導入する eslint-config-prettier: Prettier とバッティングする、ESLint のフォーマット関係のルールを無効化する 1, 2 両方やりたい場合、両方インストールして ESLint の設定に "extends": ["plugin:prettier/recommended"] と書けば OK eslint-plugin-prettier も eslint-config-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, andlinters for code-quality concerns, as outlined in Prettier vs.Linters. Luckilyit’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でESLintを使う方法も書きましたtech-1natsu.hatenablog.com TSLintではなくESLintを使いたい方はこちらもあとで読んでみてください。 なお JS with ESLint TS with TSLint この構成をお求めの方は当記事(下記)です。 Prettier導入するにあたって色々絡み合うものがあるので調べたりしたことをまとめておく。 基本的にリントとフォーマッタのどちらか片方しか使わないという場面は、リリースを意識したプロジェクトではあまりないと思うので、実質この組み合わせは必須のようになってくる気がしている。 それで、Prettierとはなんぞや…JSのコードフォーマッタで、、というPrettierの概要についてはググればめっちゃ出てくるので省略。 この記事は導入したいけどなにをどうすればいいんやという人向け。 と
const fsbx = require('fuse-box'); const fuseBox = fsbx.FuseBox.init({ homeDir: 'src/', sourcemaps : true, outFile: './dist/app.js', plugins: [ [ fsbx.SassPlugin({ outputStyle: 'compressed' }), fsbx.CSSPlugin({}) ], fsbx.TypeScriptHelpers(), fsbx.JSONPlugin(), fsbx.HTMLPlugin({ useDefault: false }) ] }); fuseBox.devServer('>main.ts **/*.html', { port: 4445 }); シンプル！！ fuse-boxの特徴として ・TypeScriptはデフォル
'use strict' const OFF = 0 const WARNING = 1 constERROR = 2 module.exports = { parser: 'babel-eslint', parserOptions: { ecmaVersion: 7, sourceType: 'module', ecmaFeatures: { jsx: true, experimentalObjectRestSpread: true, }, }, env: { browser: true, node: true, es6: true, }, extends: [ 'plugin:unicorn/recommended', 'plugin:react/recommended', 'plugin:import/errors', 'prettier', 'prettier/flowtype'
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplate master ブランチには、ミニマムなJavaScript 開発環境がサンプルコード付きで入っている frontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っている デフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っている はじめに 最近のJavaScript について 僕は仕事としてJavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。
javascript-style-guide 常に気をつけたい、JavaScriptへの正しい接し方 View onGitHubAirbnbJavaScript スタイルガイド() { 元文書:https://github.com/airbnb/javascript 常に気をつけたい、JavaScriptへの正しい接し方Note: thisguide 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, withairbnb-browser-shims or the equivalent. 注意: このガイドはあなたがB
ES6 +React + Redux +webpack なフロントエンド環境を構築するためのメモ。 packages.json npm install --savereactreact-domreact-redux npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react npm install --save-devwebpackwebpack-dev-serverreact-hot-loader npm install --save-dev eslint eslint-plugin-react eslint-plugin-import { "name": "my-env", "version": "1.0.0", "description": "", "scr
この翻訳についてAirbnbReact/JSX StyleGuideの和訳です。 間違っていたり分かりにくい箇所があれば、ご指摘いただけると幸いです。AirbnbReact/JSX スタイルガイド このスタイルガイドは現在一般的に使用されている標準に基いていますが、場合によってはいくつかの慣例（async/awaitやstatic class fields）が含まれていたり禁止されていたりします。現在、このガイドにはステージ3より前のものは含まれておらず非推奨です。 目次 基本的なルール クラス vsReact.createClass vs ステートレス ミックスイン命名規則 宣言 アラインメント 引用符 空白 引数 参照 括弧 タグ メソッド 順序 isMounted 基本的なルールReactコンポーネントは1ファイルに1つだけにしてください。 ただし、1ファイルに複数の
![[翻訳] Airbnb React/JSX Style Guide - Qiita](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2ff0734d3ad871565c5611c448cdd8f6a087966b02%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fqiita-user-contents.imgix.net%25252Fhttps%2525253A%2525252F%2525252Fcdn.qiita.com%2525252Fassets%2525252Fpublic%2525252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%25253Fixlib%25253Drb-4.0.0%252526w%25253D1200%252526blend64%25253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNTQ4MTAlMkZwcm9maWxlLWltYWdlcyUyRjE2NDkzMDU5NzQ_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPWY0M2M0OTk2YThlNmVlYTkzMDUyMjkyNTA2YmMyZmE0%252526blend-x%25253D120%252526blend-y%25253D467%252526blend-w%25253D82%252526blend-h%25253D82%252526blend-mode%25253Dnormal%252526s%25253D0806695efa6928222840c9b6ecbc80ba%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526fm%253Djpg%2526mark64%253DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEJTIwQWlyYm5iJTIwUmVhY3QlMkZKU1glMjBTdHlsZSUyMEd1aWRlJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9OGUzZmJjNDJmZTI1MmJkMjU5ZjRiOTc3NzkyMDBiNDU%2526mark-x%253D120%2526mark-y%253D112%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5YW1hZGFzaHkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0wYjFhYTE5YTA2NWZkZDczNWQ1NTdmNGYxYmFiZDM0ZQ%2526blend-x%253D242%2526blend-y%253D480%2526blend-w%253D838%2526blend-h%253D46%2526blend-fit%253Dcrop%2526blend-crop%253Dleft%25252Cbottom%2526blend-mode%253Dnormal%2526s%253D742f60ef6bae749522a4918f6b8d0a10&f=jpg&w=240)
{ "env": {}, "globals": {}, "ecmaFeatures": {}, "parser": null, "rules": {} }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
