VSCode に乗り換えてはじめてやること！〜初心者向け〜

一旦慣れたら、このような Snippet なしではコード書けない！

これで設定は完了です。これ一つで七つの言語をサポートしてくれます。

• JavaScript (.js)
• Redux (.js)
• ReactJS (.js)
• React Native (.js)
• React Native StyleSheet (.js)
• TypeScript ReactJS (.tsx)
• Typescript React Native (.tsx)

では、使い方をみてみましょう。

VSCode で任意の .js ファイルを作成して開きます。( ここでは rn-snippet.js ファイルを作成 )

他、様々な ショートカットキーがありますので、ここ から確認しながら試してみましょう。

HTML、CSS などのタグを完成してくれます。

使い方をみてみましょう。

VSCode で html5.html のような任意のファイルを作成して開きます。

html:5 と打ち込んで Enter キーを押すと下記のようになります。

詳細なショートカットキーの一覧や使い方は ここ をご参考ください。

React Native snippet と同じ手順でインストールしてください。

VSCode の Settings で Editor: Format On Save を True にすることで、ファイルを保存すると自動で指定のフォーマットに変換してくれます。

動作を確認しましょう。

VSCode で Prettier-test.js のように任意のファイルを作成して、下記のように書きます。

import React, {Component} from 'react'
import {View,Text} from 'react-native'

▲ のコードには{Component}、{View,Text} にすベースが入ってない、各ラインの後ろに ; がついていない状態ですが、このファイルを保存すると、▼ のようにスペースとセミコロンが勝手に追加されます。

import React, { Component } from "react";
import { View, Text } from "react-native";

ESLint は VSCode の拡張機能をインストールするだけではなくターミナルで設定を行う必要があります。

まず、VSCode の拡張機能をインストールします。

▼ ターミナルを開いて eslint を npm でインストールします。( ここ を参考 )
ESLint を設定したい場所に移動して (package.json ファイルがあるところに移動 )、npx eslint --init コマンドを打ち込んで設定ファイルを作成します。対話式のインターフェースで必要なオプションを選択するだけです。

try🐶everything ReactNative$ npm install eslint --save-dev
try🐶everything ReactNative$ npm install eslint-plugin-react --save-dev

try🐶everything ReactNative$ eslint --init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Does your project use TypeScript? No
? Where does your code run? Browser
? What format do you want your config file to be in? JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

すると、下記のように .eslintrc.js ファイルが自動作成されますが、
このまま ESLint を実行すると、Warning: React version not specified in eslint-plugin-react settings. というエラーが発生してしまいます。

// .eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
};

下記のように settings:を追加すればエラーが消えます。

module.exports = {
  settings: {
    react: {
      version: "detect"
    }
  },
  env: {
    browser: true,
    es6: true
  },
...

ESLint の動作を確認しましょう。

VSCode を再起動して eslint-test.js のようなファイルを下記のように作成します。

import React, { Component } from "react";
import { View, Text } from "react-native";

export default class ESLintTest extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View>
        <Text>ESLintTest</Text>
      </View>
    );
  }
}

▲ ファイルには間違っているところがありますので、それを ESLint が見つけ出せば正常に動作することになります。

誤：return <View>ESLintTest</View>;
正：return <View><Text>ESLintTest</Text></View>;

npx eslint eslint-test.js コマンドを実行して ESLint の動作を確認すると下記のようの <Text> を インポートしたのに使われていません！ とエラーを吐き足せば正常に動作していることです。

最後に、

ESLint で Prettier をコントロールするように設定を追加します。

ターミナルで以下のパッケージをインストールし、
yarn add -D eslint-plugin-prettier eslint-config-prettier

.eslintrc.js 設定ファイルに以下を追加します。

 // .eslintrc.js
 {
 …
   "extends": ["prettier"],
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": "error"
   }
 …
 }

↓↓↓完成版

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "prettier",
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error"
    }
};

次は、
Step 3 のように VSCode の Settings で Editor: Default Formatter を dbaeumer.vscode-eslint にすると、JavaScript の書き方のチェックやコードのフォーマットの整理をファイルを保存するたびにチェックしてくれます。

※ ESLint のより詳細な設定方法がありますが、設定ファイルの中の "extends": [ "eslint:recommended"]によって デフォルトのルール をチェックできます。

Sublime Text 3のようなテーマに変更します。VSCode を開いて下記のように設定します。

デフォルトの javascriptreact.json を利用すると動作しなかった為、
❶「New Global Snippets file…」をクリックし、❷ 「javascript.json」 と打ち込みます。
javascriptreact.json のファイルをコピー＆ペーストして保存します。

❶「New Global Snippets file…」をクリックし、❷ 「jsx-attr.json」 と打ち込みます。
jsx-attr.json のファイルをコピー＆ペーストして保存します。

❶「New Global Snippets file…」をクリックし、❷ 「jsx.json」 と打ち込みます。
jsx.json のファイルをコピー＆ペーストして保存します。

任意の .js ファイルを作成します。▼ のショートカットキーを打ち込んで試してみます。

// より便利なショートカットキーの一覧
imrnc  - Import React Native Component
imrnfc - Import React Native Functional Component
imrnp -  Create Panresponder.create
imrnss - Create React Native Style Sheet
clog   - console.log("$1")
rnmap  - React Native Map Method
rndime - const {width,height} = Dimensions.get('window')
rncomp - Create a React Native Component
rnfcomp  - Create a Functional React Native Component
rnajc - alignItems:'center',justifyContent:'center'
<but - <Button title='${1:title}' onPress={()=>${2:alert('button pressed')}}/>