vscode代码格式化和eslint的使用

简介

今天看着写的代码越来越多后，发现自己读起都有点吃力了，哈哈，自己看着眼睛痛，就准备整顿一下，毕竟这个项目还要维护很久的，找解决方案和测试解决方案就用了一个半小时，严重开始怀疑自己的智商了。下面的目标让代码看起来很公正

代码编辑器

vscode
version:版本 1.35.1 (1.35.1) 2019-06-12T14:19:05.197Z更新的

vscode代码格式化

因为目前公司就我一个后端，项目也不大，所以就采用这种方案，简单快捷粗暴。

一.点击code-> PReferences-> settings 点击右上角{ }
二.用户自定义设置(/User/settings.json)
添加代码

"edITor.formatOnTyPE": true,"editor.formatOnSave": true

ESLint配置

ESLint不仅有代码规范而且还有一部分语法检查的功能，ex:命令规范(驼峰) a==b警告提示a===b...
ESLint可以有效的规范代码，以后还是会采用，培养自己的规范的编码习惯
https://cn.eslint.org/

1.vscode安装ESLint

这里以配置eslint-config-aribnb的例子
vscode在extensions中安装ESLint

2.npm安装

npm install -g eslint

3.创建.eslintrc文件

SoftwaredeMacBook-Pro:koa-pro software$ "eslint --init"? How would you like to configure ESLint? "Use a popular style guide"? which style guide do you want to follow? "airbnb" (https://github.COM/airbnb/javascript)? Do you use React? "No"? What format do you want your config file to be in? "JSON"Checking peerDependencies of eslint-config-airbnb-base@latestThe config that you have selected requires the following dependencies:eslint-config-airbnb-base@latest eslint@^4.19.1 || ^5.3.0 eslint-plugin-import@^2.14.0? Would you like to install them now with npm? "Yes"Installing eslint-config-airbnb-base@latest, eslint@^4.19.1 || ^5.3.0, eslint-plugin-import@^2.14.0npm WARN koa-pro@1.0.0 No repository field.+ eslint@5.16.0+ eslint-plugin-import@2.17.3+ eslint-config-airbnb-base@13.1.0updated 3 packages and audited 7469 packages in 23.559sfound 370 vulnerabilities (1 low, 367 moderate, 2 high) run `npm audit fix` to fix them, or `npm audit` for detailsSuccessfully created .eslintrc.JSON file in /Users/software/workspace/Me/huafu/koa-pro

项目目录下将会生成一个eslintrc.json的文件

{
 "extends": "airbnb-base"}
添加自己想要的设置，我这里node环境{
"env": {
 "node": true, "es6": true }
, "parserOptions": {
#解决import export eslint报错 "ecmaFeatures": {
  "legacyDecorators": true }
 }
, "extends": "airbnb-base"}
    

4.关联eslint与vscode

1.code-> preferences-> settings 进入user的seetings
2.添加以下代码

"eslint.autoFixOnSave": true,//保存自动修复eslint错误 "eslint.validate": [ "javascript", "javascriptreact", {
  "language": "vue",  "autoFix": true }
 ], "eslint.options": {
//指定eslint配置文件位置i "configFile": ".eslintrc.json" //指定项目根目录中的eslint配置文件 }
    

这样vscode和eslint关联配置完成了，不出意外会报一大堆错。good lucky

总结：

主要是卡在eslint.options上，没看vscode的extensions的eslint的README,而去相信了百度，没有添加eslint.options，那么一直都无法生效.学的教训。

到此这篇关于vscode代码格式化和eslint的使用的文章就介绍到这了,更多相关vscode代码格式化内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• 在vue中使用eslint,配合vscode的操作
• 关于VSCode 装好ESLint 插件 import 报黄线的问题
• Idea安装Eslint插件提示：Plugin NativeScript was not installed的问题
• vue-cli3项目配置eslint代码规范的完整步骤
• vscode配置setting.json文件实现eslint自动格式代码
• 使用eslint和githooks统一前端风格的技巧
• eslint+prettier统一代码风格的实现方法
• vue-cli4项目开启eslint保存时自动格式问题
• vscode 配置vue+vetur+eslint+prettier自动格式化功能
• JS代码检查工具ESLint介绍与使用方法
• Vue的Eslint配置文件eslintrc.js说明与规则介绍
• vue项目中使用eslint+prettier规范与检查代码的方法
• ESLint 是如何检查 .vue 文件的

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！