mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-06-10 15:29:16 +08:00
202 lines
31 KiB
HTML
202 lines
31 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Setting Up Your Editor · Create React App</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="<p>Create React App comes with a bunch of tools that improve the editing experience - if configured correctly. Here's a few tips to maximize your productivity:</p>
|
||
"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Setting Up Your Editor · Create React App"/><meta property="og:type" content="website"/><meta property="og:url" content="https://create-react-app.dev/index.html"/><meta property="og:description" content="<p>Create React App comes with a bunch of tools that improve the editing experience - if configured correctly. Here's a few tips to maximize your productivity:</p>
|
||
"/><meta property="og:image" content="https://create-react-app.dev/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://create-react-app.dev/img/logo-og.png"/><link rel="shortcut icon" href="/img/favicon/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
addBackToTop(
|
||
{"zIndex":100}
|
||
)
|
||
});
|
||
</script><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/logo.svg" alt="Create React App"/><h2 class="headerTitleWithLogo">Create React App</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="https://reactjs.org/community/support.html" target="_self">Help</a></li><li class=""><a href="https://www.github.com/facebook/create-react-app" target="_self">GitHub</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Development</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Welcome<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/documentation-intro">About Docs</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Getting Started<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/docs/folder-structure">Folder Structure</a></li><li class="navListItem"><a class="navItem" href="/docs/available-scripts">Available Scripts</a></li><li class="navListItem"><a class="navItem" href="/docs/supported-browsers-features">Supported Browsers and Features</a></li><li class="navListItem"><a class="navItem" href="/docs/updating-to-new-releases">Updating to New Releases</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Development<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem navListItemActive"><a class="navItem" href="/docs/setting-up-your-editor">Editor Setup</a></li><li class="navListItem"><a class="navItem" href="/docs/developing-components-in-isolation">Developing Components in Isolation</a></li><li class="navListItem"><a class="navItem" href="/docs/analyzing-the-bundle-size">Analyzing Bundle Size</a></li><li class="navListItem"><a class="navItem" href="/docs/using-https-in-development">HTTPS in Development</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Styles and Assets<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/adding-a-stylesheet">Adding Stylesheets</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-a-css-modules-stylesheet">Adding CSS Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-a-sass-stylesheet">Adding Sass Stylesheets</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-css-reset">Adding CSS Reset</a></li><li class="navListItem"><a class="navItem" href="/docs/post-processing-css">Post-Processing CSS</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-images-fonts-and-files">Adding Images, Fonts, and Files</a></li><li class="navListItem"><a class="navItem" href="/docs/loading-graphql-files">Loading .graphql Files</a></li><li class="navListItem"><a class="navItem" href="/docs/using-the-public-folder">Using the Public Folder</a></li><li class="navListItem"><a class="navItem" href="/docs/code-splitting">Code Splitting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Building your App<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/installing-a-dependency">Installing a Dependency</a></li><li class="navListItem"><a class="navItem" href="/docs/importing-a-component">Importing a Component</a></li><li class="navListItem"><a class="navItem" href="/docs/using-global-variables">Using Global Variables</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-bootstrap">Adding Bootstrap</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-flow">Adding Flow</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-typescript">Adding TypeScript</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-relay">Adding Relay</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-a-router">Adding a Router</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-custom-environment-variables">Environment Variables</a></li><li class="navListItem"><a class="navItem" href="/docs/making-a-progressive-web-app">Making a Progressive Web App</a></li><li class="navListItem"><a class="navItem" href="/docs/production-build">Creating a Production Build</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Testing<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/running-tests">Running Tests</a></li><li class="navListItem"><a class="navItem" href="/docs/debugging-tests">Debugging Tests</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Back-End Integration<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/proxying-api-requests-in-development">Proxying in Development</a></li><li class="navListItem"><a class="navItem" href="/docs/fetching-data-with-ajax-requests">Fetching Data</a></li><li class="navListItem"><a class="navItem" href="/docs/integrating-with-an-api-backend">Integrating with an API</a></li><li class="navListItem"><a class="navItem" href="/docs/title-and-meta-tags">Title & Meta Tags</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Deployment<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/deployment">Deployment</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Advanced Usage<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/can-i-use-decorators">Can I Use Decorators?</a></li><li class="navListItem"><a class="navItem" href="/docs/pre-rendering-into-static-html-files">Pre-Rendering Static HTML</a></li><li class="navListItem"><a class="navItem" href="/docs/advanced-configuration">Advanced Configuration</a></li><li class="navListItem"><a class="navItem" href="/docs/alternatives-to-ejecting">Alternatives to Ejecting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Support<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/troubleshooting">Troubleshooting</a></li></ul></div></div></section></div><script>
|
||
var coll = document.getElementsByClassName('collapsible');
|
||
var checkActiveCategory = true;
|
||
for (var i = 0; i < coll.length; i++) {
|
||
var links = coll[i].nextElementSibling.getElementsByTagName('*');
|
||
if (checkActiveCategory){
|
||
for (var j = 0; j < links.length; j++) {
|
||
if (links[j].classList.contains('navListItemActive')){
|
||
coll[i].nextElementSibling.classList.toggle('hide');
|
||
coll[i].childNodes[1].classList.toggle('rotate');
|
||
checkActiveCategory = false;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
coll[i].addEventListener('click', function() {
|
||
var arrow = this.childNodes[1];
|
||
arrow.classList.toggle('rotate');
|
||
var content = this.nextElementSibling;
|
||
content.classList.toggle('hide');
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
|
||
createToggler('#tocToggler', 'body', 'tocActive');
|
||
|
||
const headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
if (event.target.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
}
|
||
}, false);
|
||
|
||
function createToggler(togglerSelector, targetSelector, className) {
|
||
var toggler = document.querySelector(togglerSelector);
|
||
var target = document.querySelector(targetSelector);
|
||
|
||
if (!toggler) {
|
||
return;
|
||
}
|
||
|
||
toggler.onclick = function(event) {
|
||
event.preventDefault();
|
||
|
||
target.classList.toggle(className);
|
||
};
|
||
}
|
||
});
|
||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/create-react-app/edit/master/docusaurus/docs/setting-up-your-editor.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Setting Up Your Editor</h1></header><article><div><span><p>Create React App comes with a bunch of tools that improve the editing experience - if configured correctly. Here's a few tips to maximize your productivity:</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="syntax-highlighting"></a><a href="#syntax-highlighting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Syntax highlighting</h2>
|
||
<p>To configure the syntax highlighting in your favorite text editor, head to the <a href="https://babeljs.io/docs/editors">relevant Babel documentation page</a> and follow the instructions. Some of the most popular editors are covered.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="displaying-lint-output-in-the-editor"></a><a href="#displaying-lint-output-in-the-editor" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Displaying Lint Output in the Editor</h2>
|
||
<blockquote>
|
||
<p>Note: this feature is available with <code>react-scripts@0.2.0</code> and higher.<br>
|
||
It works out of the box for newly created projects with <code>react-scripts@2.0.3</code> and higher.<br>
|
||
It also only works with npm 3 or higher.</p>
|
||
</blockquote>
|
||
<p>Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.</p>
|
||
<p>They are not required for linting. You should see the linter output right in your terminal as well as the browser console. If you prefer the lint results to appear right in your editor, please make sure you install an ESLint plugin/extension.</p>
|
||
<p>If you're using TypeScript and Visual Studio Code, the <a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#overview">ESLint Visual Studio Code extension</a> currently <a href="https://github.com/Microsoft/vscode-eslint/issues/609">doesn't have TypeScript support enabled by default</a>. To enable TypeScript support in the ESLint extension, add the following to your project's Visual Studio Code settings file, located at <code>.vscode/settings.json</code> (you can create this file if it doesn't already exist):</p>
|
||
<pre><code class="hljs css language-json">{
|
||
<span class="hljs-attr">"eslint.validate"</span>: [
|
||
<span class="hljs-string">"javascript"</span>,
|
||
<span class="hljs-string">"javascriptreact"</span>,
|
||
{ <span class="hljs-attr">"language"</span>: <span class="hljs-string">"typescript"</span>, <span class="hljs-attr">"autoFix"</span>: <span class="hljs-literal">true</span> },
|
||
{ <span class="hljs-attr">"language"</span>: <span class="hljs-string">"typescriptreact"</span>, <span class="hljs-attr">"autoFix"</span>: <span class="hljs-literal">true</span> }
|
||
]
|
||
}
|
||
</code></pre>
|
||
<p>Now your editor should report the linting warnings.</p>
|
||
<p>Note that even if you customise your ESLint config, these changes will <strong>only affect the editor integration</strong>. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes.</p>
|
||
<p>If you want to enforce a coding style for your project, consider using <a href="https://github.com/jlongster/prettier">Prettier</a> instead of ESLint style rules.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="experimental-extending-the-eslint-config"></a><a href="#experimental-extending-the-eslint-config" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Experimental: Extending the ESLint config</h3>
|
||
<p>We recognise that in some cases, further customisation is required. It is now possible to extend the base ESLint config by setting the <code>EXTEND_ESLINT</code> environment variable to <code>true</code>. See <a href="/docs/advanced-configuration">advanced configuration</a> for more information on available environment variables.</p>
|
||
<p>Note that any rules set to <code>"error"</code> will stop the project from building.</p>
|
||
<p>There are a few things to remember:</p>
|
||
<ol>
|
||
<li>We highly recommend extending the base config, as removing it could introduce hard-to-find issues.</li>
|
||
<li>When working with TypeScript, you'll need to provide an <code>overrides</code> object for rules that should <em>only</em> target TypeScript files.</li>
|
||
</ol>
|
||
<p>In the below example:</p>
|
||
<ul>
|
||
<li>the base config has been extended by a shared ESLint config,</li>
|
||
<li>a new rule has been set that applies to all JavaScript and TypeScript files, and</li>
|
||
<li>a new rule has been set that only targets TypeScript files.</li>
|
||
</ul>
|
||
<pre><code class="hljs css language-json">{
|
||
<span class="hljs-attr">"eslintConfig"</span>: {
|
||
<span class="hljs-attr">"extends"</span>: [<span class="hljs-string">"react-app"</span>, <span class="hljs-string">"shared-config"</span>],
|
||
<span class="hljs-attr">"rules"</span>: {
|
||
<span class="hljs-attr">"additional-rule"</span>: <span class="hljs-string">"warn"</span>
|
||
},
|
||
<span class="hljs-attr">"overrides"</span>: [
|
||
{
|
||
<span class="hljs-attr">"files"</span>: [<span class="hljs-string">"**/*.ts?(x)"</span>],
|
||
<span class="hljs-attr">"rules"</span>: {
|
||
<span class="hljs-attr">"additional-typescript-only-rule"</span>: <span class="hljs-string">"warn"</span>
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="debugging-in-the-editor"></a><a href="#debugging-in-the-editor" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging in the Editor</h2>
|
||
<p><strong>This feature is currently only supported by <a href="https://code.visualstudio.com">Visual Studio Code</a> and <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>.</strong></p>
|
||
<p>Visual Studio Code and WebStorm support debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="visual-studio-code"></a><a href="#visual-studio-code" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Visual Studio Code</h3>
|
||
<p>You would need to have the latest version of <a href="https://code.visualstudio.com">VS Code</a> and VS Code <a href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome">Chrome Debugger Extension</a> installed.</p>
|
||
<p>Then add the block below to your <code>launch.json</code> file and put it inside the <code>.vscode</code> folder in your app’s root directory.</p>
|
||
<pre><code class="hljs css language-json">{
|
||
<span class="hljs-attr">"version"</span>: <span class="hljs-string">"0.2.0"</span>,
|
||
<span class="hljs-attr">"configurations"</span>: [
|
||
{
|
||
<span class="hljs-attr">"name"</span>: <span class="hljs-string">"Chrome"</span>,
|
||
<span class="hljs-attr">"type"</span>: <span class="hljs-string">"chrome"</span>,
|
||
<span class="hljs-attr">"request"</span>: <span class="hljs-string">"launch"</span>,
|
||
<span class="hljs-attr">"url"</span>: <span class="hljs-string">"http://localhost:3000"</span>,
|
||
<span class="hljs-attr">"webRoot"</span>: <span class="hljs-string">"${workspaceFolder}/src"</span>,
|
||
<span class="hljs-attr">"sourceMapPathOverrides"</span>: {
|
||
<span class="hljs-attr">"webpack:///src/*"</span>: <span class="hljs-string">"${webRoot}/*"</span>
|
||
}
|
||
}
|
||
]
|
||
}
|
||
</code></pre>
|
||
<blockquote>
|
||
<p>Note: the URL may be different if you've made adjustments via the <a href="/docs/advanced-configuration">HOST or PORT environment variables</a>.</p>
|
||
</blockquote>
|
||
<p>Start your app by running <code>npm start</code>, and start debugging in VS Code by pressing <code>F5</code> or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.</p>
|
||
<p>Having problems with VS Code Debugging? Please see their <a href="https://github.com/Microsoft/vscode-chrome-debug/blob/master/README.md#troubleshooting">troubleshooting guide</a>.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="webstorm"></a><a href="#webstorm" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>WebStorm</h3>
|
||
<p>You would need to have <a href="https://www.jetbrains.com/webstorm/">WebStorm</a> and <a href="https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji">JetBrains IDE Support</a> Chrome extension installed.</p>
|
||
<p>In the WebStorm menu <code>Run</code> select <code>Edit Configurations...</code>. Then click <code>+</code> and select <code>JavaScript Debug</code>. Paste <code>http://localhost:3000</code> into the URL field and save the configuration.</p>
|
||
<blockquote>
|
||
<p>Note: the URL may be different if you've made adjustments via the <a href="/docs/advanced-configuration">HOST or PORT environment variables</a>.</p>
|
||
</blockquote>
|
||
<p>Start your app by running <code>npm start</code>, then press <code>^D</code> on macOS or <code>F9</code> on Windows and Linux or click the green debug icon to start debugging in WebStorm.</p>
|
||
<p>The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="formatting-code-automatically"></a><a href="#formatting-code-automatically" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Formatting Code Automatically</h2>
|
||
<p>Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the <a href="https://github.com/prettier/prettier">Prettier's GitHub page</a> for more information, and look at this <a href="https://prettier.github.io/prettier/">page to see it in action</a>.</p>
|
||
<p>To format our code whenever we make a commit in git, we need to install the following dependencies:</p>
|
||
<pre><code class="hljs css language-sh">npm install --save husky lint-staged prettier
|
||
</code></pre>
|
||
<p>Alternatively you may use <code>yarn</code>:</p>
|
||
<pre><code class="hljs css language-sh">yarn add husky lint-staged prettier
|
||
</code></pre>
|
||
<ul>
|
||
<li><code>husky</code> makes it easy to use githooks as if they are npm scripts.</li>
|
||
<li><code>lint-staged</code> allows us to run scripts on staged files in git. See this <a href="https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8">blog post about lint-staged to learn more about it</a>.</li>
|
||
<li><code>prettier</code> is the JavaScript formatter we will run before commits.</li>
|
||
</ul>
|
||
<p>Now we can make sure every file is formatted correctly by adding a few lines to the <code>package.json</code> in the project root.</p>
|
||
<p>Add the following field to the <code>package.json</code> section:</p>
|
||
<pre><code class="hljs css language-diff"><span class="hljs-addition">+ "husky": {</span>
|
||
<span class="hljs-addition">+ "hooks": {</span>
|
||
<span class="hljs-addition">+ "pre-commit": "lint-staged"</span>
|
||
<span class="hljs-addition">+ }</span>
|
||
<span class="hljs-addition">+ }</span>
|
||
</code></pre>
|
||
<p>Next we add a 'lint-staged' field to the <code>package.json</code>, for example:</p>
|
||
<pre><code class="hljs css language-diff"> "dependencies": {
|
||
// ...
|
||
},
|
||
<span class="hljs-addition">+ "lint-staged": {</span>
|
||
<span class="hljs-addition">+ "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [</span>
|
||
<span class="hljs-addition">+ "prettier --single-quote --write",</span>
|
||
<span class="hljs-addition">+ "git add"</span>
|
||
<span class="hljs-addition">+ ]</span>
|
||
<span class="hljs-addition">+ },</span>
|
||
"scripts": {
|
||
</code></pre>
|
||
<p>Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run <code>./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"</code> to format your entire project for the first time.</p>
|
||
<p>Next you might want to integrate Prettier in your favorite editor. Read the section on <a href="https://prettier.io/docs/en/editors.html">Editor Integration</a> on the Prettier GitHub page.</p>
|
||
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 8/13/2019 by Ian Schmitz</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/updating-to-new-releases"><span class="arrow-prev">← </span><span>Updating to New Releases</span></a><a class="docs-next button" href="/docs/developing-components-in-isolation"><span>Developing Components in Isolation</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#syntax-highlighting">Syntax highlighting</a></li><li><a href="#displaying-lint-output-in-the-editor">Displaying Lint Output in the Editor</a><ul class="toc-headings"><li><a href="#experimental-extending-the-eslint-config">Experimental: Extending the ESLint config</a></li></ul></li><li><a href="#debugging-in-the-editor">Debugging in the Editor</a><ul class="toc-headings"><li><a href="#visual-studio-code">Visual Studio Code</a></li><li><a href="#webstorm">WebStorm</a></li></ul></li><li><a href="#formatting-code-automatically">Formatting Code Automatically</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||
document.addEventListener('keyup', function(e) {
|
||
if (e.target !== document.body) {
|
||
return;
|
||
}
|
||
// keyCode for '/' (slash)
|
||
if (e.keyCode === 191) {
|
||
const search = document.getElementById('search_input_react');
|
||
search && search.focus();
|
||
}
|
||
});
|
||
</script><script>
|
||
var search = docsearch({
|
||
|
||
apiKey: '3be60f4f8ffc24c75da84857d6323791',
|
||
indexName: 'create-react-app',
|
||
inputSelector: '#search_input_react'
|
||
});
|
||
</script></body></html> |