This article will share with you how to build an eslint development environment based on vscode. It has a certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone
![A brief discussion on how to build an eslint development environment in vscode](/static/imghw/default1.png)
[Recommended learning: "vscode tutorial"]
Basic environment:
vscode v1.0.0
eslint v2.8.0
-
mac
If you don’t have vscode yet, you can download it from here
![1621220754804819.png A brief discussion on how to build an eslint development environment in vscode](/static/imghw/default1.png)
to install vscode The required eslint plug-in
plugin address ishere
![162122076056317A brief discussion on how to build an eslint development environment in vscode A brief discussion on how to build an eslint development environment in vscode](/static/imghw/default1.png)
##Copy the command, open the shortcut bar in vscode, command p, paste , vscode will automatically download the plug-in. After the plug-in is downloaded, you will be prompted to restart vscode to run the plug-in.
After the installation is complete, we open Terminal and create our project
mkdir vsc-demo && cd vsc-demo
Copy after login
New file
touch app.js
Copy after login
Open vscode, let’s try to write some code
var num = 1;
const array = []
Copy after login
![162122076839526A brief discussion on how to build an eslint development environment in vscode A brief discussion on how to build an eslint development environment in vscode](/static/imghw/default1.png)
It seems that vscode does not recognize the keyword const now.
Now let’s install the global eslint
![162122077434150A brief discussion on how to build an eslint development environment in vscode A brief discussion on how to build an eslint development environment in vscode](/static/imghw/default1.png)
Open our Terminal and type
npm install eslint -g
Copy after login
After installation, you can view our version
eslint --v
// v2.8.0
Copy after login
Use eslint to create rules
eslint --init
Copy after login
We chose the standard eslint rule
![162122078299012A brief discussion on how to build an eslint development environment in vscode A brief discussion on how to build an eslint development environment in vscode](/static/imghw/default1.png)
Then we restarted our vscode
![1621220788998148.png A brief discussion on how to build an eslint development environment in vscode](/static/imghw/default1.png)
Then we found that there were more errors! Don’t panic, let’s see what the error is:
1 and 3 both prompt us that variables are defined but not used. The second prompts us that we added extra semicolons, let’s modify the code
![162122079430735A brief discussion on how to build an eslint development environment in vscode A brief discussion on how to build an eslint development environment in vscode](https://img.php.cn/upload/image/866/345/430/162122079430735A%20brief%20discussion%20on%20how%20to%20build%20an%20eslint%20development%20environment%20in%20vscode)
OK, now eslint can work normally in our vscode environment and supports es6 syntax.
For more programming related knowledge, please visit:
Programming Video! !
The above is the detailed content of A brief discussion on how to build an eslint development environment in vscode. For more information, please follow other related articles on the PHP Chinese website!