VSCode配置ESLint(vue)

1.打开终端,全局下载ESLint。

npm install eslint -g

2. 打开VS Code,下载eslint插件,重新加载以生效。

eslint插件

3. 进入要使用ESLint的项目,打开终端输入eslint --init进行初始化。

你想怎样使用eslint

我选第三个,这样保存的时候可以自动格式化代码

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? (Use arrow keys)
  To check syntax only //只检查语法
> To check syntax and find problems//检查语法、发现问题
  To check syntax, find problems, and enforce code style//检查语法、发现问题并执行代码样式

您的项目使用什么类型的模块?

vue中用的JavaScript modules

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? (Use arrow keys)
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

项目中使用的什么框架?

当然是vue

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? (Use arrow keys)
> React
  Vue.js
  None of these

你使用TypeScript吗

我不要

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Does your project use TypeScript? (y/N)

你的代码运行在什么地方?

这里是多选,我选的浏览器和node

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Where does your code run? (Press  to select,  to toggle all,  to invert selection)
>(*) Browser
 ( ) Node

您想如何为您的项目定义一个样式?

分别是 1. 使用大厂的 2. 问问题 3. 检查现有的代码自动生成(我选第一个)

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Where does your code run? Browser, Node
? How would you like to define a style for your project? (Use arrow keys)
> Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

你想要遵循哪种风格指南?

我选第一个

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Does your project use TypeScript? No
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? (Use arrow keys)
> Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google

您希望配置文件的格式是什么?

第一个

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Does your project use TypeScript? No
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Airbnb: https://github.com/airbnb/javascript
? What format do you want your config file to be in? (Use arrow keys)
> JavaScript
  YAML
  JSON

你想现在用npm安装它们吗

选y,安装好结OK了

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Does your project use TypeScript? No
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Airbnb: https://github.com/airbnb/javascript
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.1.0 eslint-plugin-import@^2.18.2
? Would you like to install them now with npm? (Y/n)

4.安装完成

完成后应该会有.eslintec.js这么个文件
可以在rules追加或者禁用一些你不喜欢的规则
具体规则可以到eslint中文网瞄一下
http://eslint.cn/docs/rules/

image.png

你可能感兴趣的:(VSCode配置ESLint(vue))