未加星标

Setting up ESLint on VS Code with JavaScript Standard Style

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏
Setting up ESLint on VS Code with javascript StandardStyle

JavaScript Standard Style is an attempt to standardize the way developers write JavaScript. Following this style guide will ensure your code has a level of clarity that makes reading and maintaining your code easier for anyone who has to work on it.

I posted two very similar tutorials on how to set up ESLint on VS Code with Airbnb JavaScript Style Guide and with Prettier. Many people found them useful. I figured I’d do the same thing for Standard.

ESLint is a tool for “ linting ” your code. It can analyze your code and warn you of potential errors. In order for it to work, you need to configure it with specific rules. Luckily, Standard provides an ESLint configuration that anyone can use.

VS Code is a popular code editor created by Microsoft. One of the nice features is that you can enabled extensions that make your life as a developer easier. There is an extension for ESLint which will integrate it’s linting features right in your editor. You will be warned of potential problems on the fly as you write code.

Many developers consider setting up linting in this way essential. In this post, I’ll show you how to set it all up.


Setting up ESLint on VS Code with JavaScript Standard Style
The conciseversion cd coding-directory npm init -y npm i -D eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard Create .eslintrc.js : module.exports = { "extends": "standard" }; In VS Code, Ctrl + Shift + X Search ESLint Install ESLint Restart VS Code

Follow along with the detailed version below if you are new to any of the concepts above or just want to get a better understanding of what these steps do.

The detailedversion

First, download and install Node.js . Its package manager, npm, is included with the installation.

Once Node and npm are installed, open up a terminal (or command prompt). Change directories into the root directory for any coding you do. I call my directory “code”.

> cd C:\users\travis\code

This is the directory in which I want to configure ESLint. Any subdirectories within this one will also use the configuration we are about to set up. This works because, when you run ESLint, it looks in the current directory for a configuration; If it can’t find one, it moves up to the parent directory, checks there, and the process repeats until a configuration is found.

Now initialize a new npm configuration.

> npm init -y

Install and save the necessary packages for ESLint and the Standard configuration.

eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

In case you are wondering, eslint-plugin-import , eslint-plugin-node eslint-plugin-promise , and eslint-plugin-standard are peer dependencies for eslint-config-standard . They enable support for linting common JavaScript features.

Now create .eslintrc.js with the following contents:

module.exports = { "extends": "standard" };

ESLint is installed and configured for the Standard JavaScript Style. Now we need to get it working in VS Code.

Download and install VS Code .

Open it and press Ctrl + Shift + X to open the Extensions panel.

Type ESLint in the search bar. Find the ESLint extension in the search results and click the green Install button next to it.

Go ahead and close VS Code and then re-open it.

Congratulations! ESLint is enabled in your User Settings by default. If you open up any .js file in any sub-directory of C:\users\travis\code (or wherever you installed the configuration), ESLint will check your code against the Standard JavaScript Style and warn you of any conflicts.


Setting up ESLint on VS Code with JavaScript Standard Style
ESLint at work in VSCode

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Setting up ESLint on VS Code with JavaScript Standard Style
本站链接:https://www.codesec.net/view/611294.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(95)