Help us understand the problem. What is going on with this article?

VSCODEの設定項目

More than 1 year has passed since last update.

基本設定

⌘ ,を押して基本的な設定を設定していきます

    // tabのサイズ感
    "editor.tabSize": 2,
    // フォントサイズ
    "editor.fontSize": 14,
    // 折り返し指定
    "editor.wordWrap": "off",
    // 行の末尾の空白をトリミングする。
    "files.trimTrailingWhitespace": true,
    // ミニマップをfalse
    "editor.minimap.enabled": false,

Files: Exclude

特定のファイルを表示しないように設定を行う

  • **/.git
  • **/.svn
  • **/.hg
  • **/.DS_Store
  • **/CVS
  • **/node_modules

ライブラリにジャンプした際とんでもない数が展開されるので表示しないように追加しておきます。

VSCODE のスニペット

Vue や React を一から全部記述するのって結構面倒ですよね
そんな中入力保管を使用して、勝手にテンプレートを記載してくれるように VSCode を設定できるらしいのでやってみようかと思います。

結論

Code > 基本設定 > ユーザースペニットから設定できます。

コンポーネントの詳細

React であれば毎回このように記述する必要があります。

出力結果

import React from 'react';

class Sample extends React.Component {
  render() {
    return <div>sample</div>;
  }
}

export default Sample;

スペニット

reaと打つと勝手にReactの補完が出てきます。

{
  "ReactComponent": {
    "prefix": "rea",
    "body": [
      "import React from 'react'",
      "",
      "class ${1} extends React.Component {",
      "",
      "  componentDidMount () {}",
      "",
      "  render () {",
      "    return <div/>",
      "  }",
      "}",
      "export default ${1}",
      ""
    ],
    "description": "Reactコンポーネント"
  }
}

上記のコンポーネントのスペニットサンプル

他にも Store に追記を行う場合もっと色々記述する必要がでてきます。

import React from 'react';
import { connect } from 'react-redux';
import * as Actions from '../../store/actions';

const mapStateToProps = state => ({ store: state });
@connect(mapStateToProps)
class Sample extends React.Component {
  render() {
    this.props.dispatch(Actions.increment());
    return <div>sample</div>;
  }
}

export default Sample;

上記の場合は Actions が相対 Path なので、その部分は設定する必要がありますが(というか Webpack で絶対 Path 化などをすれば問題ないですが)

毎回これを記述するのって非常に手間ですよね。

そこで VSCode のスペニットを設定し、入力補完で上記のソースコードを一瞬で出力できるように設定をします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away