aktuelle.kurse/m426/4_Erweiterungen/Prüfung Codekonventionen/ESLint - JScript Code Prüfung
harald.mueller@tbz.ch 185234d0f1 MUH init
2021-10-23 00:41:45 +02:00

32 lines
13 KiB
Plaintext

<!doctype html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="JavaScript, Linter, Linting, Pluggable, Configurable, Code Quality"><meta name="description" content="A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease."><meta name="theme-color" content="#463fd4"><meta property="og:locale" content="en_US"><meta property="og:site_name" content="ESLint - Pluggable JavaScript linter"><meta property="og:title" content="Getting Started with ESLint"><meta property="og:url" content="/docs/user-guide/getting-started"><meta property="og:image" content="https://eslint.org/assets/img/favicon.512x512.png"><meta name="twitter:site" content="@geteslint"><meta name="twitter:title" content="Getting Started with ESLint"><meta name="twitter:description" content="A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease."><meta name="twitter:url" content="/docs/user-guide/getting-started"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://eslint.org/assets/img/favicon.512x512.png"><title>Getting Started with ESLint - ESLint - Pluggable JavaScript linter</title><link rel="preconnect" href="https://www.google-analytics.com"><link rel="canonical" href="/docs/user-guide/getting-started"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600"><link rel="stylesheet" href="/assets/styles/main.css"><link rel="manifest" href="/manifest.json"><link rel="icon" href="/assets/img/favicon.512x512.png"><link rel="alternate" type="application/rss+xml" title="ESLint - Pluggable JavaScript linter" href="/feed.xml"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"><script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script></head><body><input type="checkbox" id="eslint-toggle-search" class="eslint-toggle-search-checkbox"><header class="navbar navbar-default navbar-demo navbar-fixed-top eslint-nav" id="top" role="banner"><div class="container"><a href="/" class="navbar-brand"><img alt="ESLint" src="https://d33wubrfki0l68.cloudfront.net/204482ca413433c80cd14fe369e2181dd97a2a40/092e2/assets/img/logo.svg" itemprop="image">ESLint</a><div class="eslint-navbar-toggles"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#eslint-navbar" aria-controls="eslint-navbar" aria-expanded="false"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <label for="eslint-toggle-search" class="navbar-toggle eslint-toggle-search-open"><span class="sr-only">Open search</span> <span class="glyphicon glyphicon-search" aria-hidden="true"></span></label></div><nav id="eslint-navbar" class="collapse navbar-collapse eslint-navbar"><ul class="nav navbar-nav navbar-right"><li class="dropdown"><a href="/docs/user-guide" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">User guide<span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="/docs/user-guide/getting-started">Getting Started</a></li><li><a href="/docs/user-guide/configuring">Configuring ESLint</a></li><li><a href="/docs/user-guide/command-line-interface">Command Line Interface</a></li><li><a href="/docs/rules">Rules</a></li><li><a href="/docs/user-guide/formatters">Formatters</a></li><li><a href="/docs/user-guide/integrations">Integrations</a></li><li class="divider"></li><li><a href="/docs/8.0.0/user-guide/migrating-to-8.0.0">Migrating to v8.0.0</a></li><li><a href="/docs/user-guide/migrating-to-7.0.0">Migrating to v7.0.0</a></li><li><a href="/docs/user-guide/migrating-to-6.0.0">Migrating to v6.0.0</a></li><li><a href="/docs/user-guide/migrating-to-5.0.0">Migrating to v5.0.0</a></li><li><a href="/docs/user-guide/migrating-to-4.0.0">Migrating to v4.0.0</a></li><li><a href="/docs/user-guide/migrating-to-3.0.0">Migrating to v3.0.0</a></li><li><a href="/docs/user-guide/migrating-to-2.0.0">Migrating to v2.0.0</a></li><li><a href="/docs/user-guide/migrating-to-1.0.0">Migrating to v1.0.0</a></li><li><a href="/docs/user-guide/migrating-from-jscs">Migrating from JSCS</a></li></ul></li><li class="dropdown"><a href="/docs/developer-guide" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Developer guide<span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="/docs/developer-guide/architecture">Architecture</a></li><li><a href="/docs/developer-guide/contributing">Contributing</a></li><li><a href="/docs/developer-guide/source-code">Get the Source Code</a></li><li><a href="/docs/developer-guide/development-environment">Set up a Development Environment</a></li><li><a href="/docs/developer-guide/unit-tests">Run the Unit Tests</a></li><li><a href="/docs/developer-guide/working-with-rules">Working with Rules</a></li><li><a href="/docs/developer-guide/working-with-plugins">Working with Plugins</a></li><li><a href="/docs/developer-guide/working-with-custom-formatters">Working with Custom Formatters</a></li><li><a href="/docs/developer-guide/working-with-custom-parsers">Working with Custom Parsers</a></li><li><a href="/docs/developer-guide/shareable-configs">Shareable Configs</a></li><li><a href="/docs/developer-guide/nodejs-api">Node.js API</a></li><li><a href="/docs/maintainer-guide">Maintainer guide</a></li></ul></li><li><a href="/blog">Blog</a></li><li><a href="/demo">Demo</a></li><li class="dropdown"><a href="/docs/about" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">About<span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="/users">Who's Using ESLint?</a></li><li><a href="/team">About the Team</a></li><li><a href="/docs/about">About ESLint</a></li></ul></li></ul><label for="eslint-toggle-search" class="navbar-toggle eslint-toggle-search-open"><span class="sr-only">Open search</span> <span class="glyphicon glyphicon-search" aria-hidden="true"></span></label><div class="navbar-form navbar-right eslint-search" role="search"><div class="input-group"><label class="sr-only" aria-label="Search" for="eslint-search-input">Search</label><div class="eslint-search-input-wrapper"><input type="text" class="form-control" id="eslint-search-input" accesskey="s" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search the docs..."> <label for="eslint-toggle-search" class="eslint-toggle-search-close"><span class="sr-only">Close search</span> <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></label></div></div></div></nav></div></header><main class="doc"><article class="container"><div class="eslint-ad-float hidden-xs hidden-sm"><script id="eslint-sponsor">if(window.innerWidth > 800) {
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "//cdn.carbonads.com/carbon.js?serve=CESDV2QM&placement=eslintorg";
s.id = "_carbonads_js";
document.getElementById("eslint-sponsor").after(s);
document.getElementById("eslint-sponsor").remove();
}</script></div><h1 id="getting-started-with-eslint">Getting Started with ESLint</h1><p>ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions:</p><ul><li>ESLint uses <a href="https://github.com/eslint/espree">Espree</a> for JavaScript parsing.</li><li>ESLint uses an AST to evaluate patterns in code.</li><li>ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.</li></ul><h2 id="installation-and-usage">Installation and Usage</h2><p>Prerequisites: <a href="https://nodejs.org/en/">Node.js</a> (<code>^12.22.0</code>, <code>^14.17.0</code>, or <code>&gt;=16.0.0</code>) built with SSL support. (If you are using an official Node.js distribution, SSL is always built in.)</p><p>You can install ESLint using npm or yarn:</p><pre class="hljs highlight-"><code>npm install eslint --save-dev
# or
yarn add eslint --dev
</code></pre><p>You should then set up a configuration file, and the easiest way to do that is to use the <code>--init</code> flag:</p><pre class="hljs highlight-"><code>$ npx eslint --init
# or
$ yarn run eslint --init
</code></pre><p><strong>Note:</strong> <code>--init</code> assumes you have a <code>package.json</code> file already. If you don't, make sure to run <code>npm init</code> or <code>yarn init</code> beforehand.</p><p>After that, you can run ESLint on any file or directory like this:</p><pre class="hljs highlight-"><code>$ npx eslint yourfile.js
# or
$ yarn run eslint yourfile.js
</code></pre><p>It is also possible to install ESLint globally rather than locally (using <code>npm install eslint --global</code>). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.</p><h2 id="configuration">Configuration</h2><p><strong>Note:</strong> If you are coming from a version before 1.0.0 please see the <a href="migrating-to-1.0.0">migration guide</a>.</p><p>After running <code>eslint --init</code>, you'll have a <code>.eslintrc.{js,yml,json}</code> file in your directory. In it, you'll see some rules configured like this:</p><pre class="hljs highlight-json"><code>{
<span class="hljs-attr">&quot;rules&quot;</span>: {
<span class="hljs-attr">&quot;semi&quot;</span>: [<span class="hljs-string">&quot;error&quot;</span>, <span class="hljs-string">&quot;always&quot;</span>],
<span class="hljs-attr">&quot;quotes&quot;</span>: [<span class="hljs-string">&quot;error&quot;</span>, <span class="hljs-string">&quot;double&quot;</span>]
}
}
</code></pre><p>The names <code>&quot;semi&quot;</code> and <code>&quot;quotes&quot;</code> are the names of <a href="/docs/rules">rules</a> in ESLint. The first value is the error level of the rule and can be one of these values:</p><ul><li><code>&quot;off&quot;</code> or <code>0</code> - turn the rule off</li><li><code>&quot;warn&quot;</code> or <code>1</code> - turn the rule on as a warning (doesn't affect exit code)</li><li><code>&quot;error&quot;</code> or <code>2</code> - turn the rule on as an error (exit code will be 1)</li></ul><p>The three error levels allow you fine-grained control over how ESLint applies rules (for more configuration options and details, see the <a href="configuring/">configuration docs</a>).</p><p>Your <code>.eslintrc.{js,yml,json}</code> configuration file will also include the line:</p><pre class="hljs highlight-json"><code>{
<span class="hljs-attr">&quot;extends&quot;</span>: <span class="hljs-string">&quot;eslint:recommended&quot;</span>
}
</code></pre><p>Because of this line, all of the rules marked &quot;<span title="recommended" aria-label="recommended">✓</span>&quot; on the <a href="/docs/rules">rules page</a> will be turned on. Alternatively, you can use configurations that others have created by searching for &quot;eslint-config&quot; on <a href="https://www.npmjs.com/search?q=eslint-config">npmjs.com</a>. ESLint will not lint your code unless you extend from a shared configuration or explicitly turn rules on in your configuration.</p><hr><h2 id="next-steps">Next Steps</h2><ul><li>Learn about <a href="configuring/">advanced configuration</a> of ESLint.</li><li>Get familiar with the <a href="command-line-interface">command line options</a>.</li><li>Explore <a href="integrations">ESLint integrations</a> into other tools like editors, build systems, and more.</li><li>Can't find just the right rule? Make your own <a href="/docs/developer-guide/working-with-rules">custom rule</a>.</li><li>Make ESLint even better by <a href="/docs/developer-guide/contributing/">contributing</a>.</li></ul></article></main><hr><div class="container"><footer><ul class="list-inline" style="text-align: center;"><li><a href="https://groups.google.com/group/eslint"><i class="fab fa-google fa-2x"></i> <span style="display:block;position:relative">Group</span></a></li><li><a href="https://github.com/eslint/eslint"><i class="fab fa-github fa-2x"></i> <span style="display:block;position:relative">GitHub</span></a></li><li><a href="https://twitter.com/geteslint"><i class="fab fa-twitter fa-2x"></i> <span style="display:block;position:relative">Twitter</span></a></li><li><a href="/chat"><i class="fab fa-discord fa-2x"></i> <span style="display:block;position:relative">Discord</span></a></li><br><li>Copyright OpenJS Foundation and other contributors, <a href="https://openjsf.org/">www.openjsf.org</a></li><li><a href="https://github.com/eslint/eslint/edit/master/docs/user-guide/getting-started.md">Edit this page</a></li></ul></footer></div><script src="/assets/js/main.js"></script><script src="https://kit.fontawesome.com/6ebce1c175.js" crossorigin="anonymous"></script></body></html>