[VS Code] React 개발을 위한 .js 파일 연관정보 변경

VisualStudio Code 로 React 개발시 .js 파일에 jsx 형태의 소스를 작성하고 저장하면 자동 포맷팅이 될때 javascript 형태로 포맷팅이 되면서 이상한 형태로 소스가 변경된다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
    render() {
        return ( <
            div className = "App" >
            <
            header className = "App-header" >
            <
            img src = { logo }
            className = "App-logo"
            alt = "logo" / >
            <
            p >
            Edit < code > src / App.js < /code> and save to reload. <
            /p> <
            a className = "App-link"
            href = "https://reactjs.org"
            target = "_blank"
            rel = "noopener noreferrer" >
            Learn React <
            /a> <
            /header> <
            /div>
        );
    }
}
 
export default App;

 

.js 파일의 연관언어가 javascript 라서 태그를 부호로 처리하는것 같다. settings.json 을 열어 아래 항목을 수정한다.

    "files.associations": {
        "*.js": "javascriptreact"
    }

 

 

[출처] https://www.vobour.com/vscode-%EC%B6%94%EC%B2%9C-%EC%9D%B5%EC%8A%A4%ED%85%90%EC%85%98%EA%B3%BC-%EC%84%B8%ED%8C%85-vscode-recommended-e