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@latest
The 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.0
npm 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.0
updated 3 packages and audited 7469 packages in 23.559s
found 370 vulnerabilities (1 low, 367 moderate, 2 high)
 run `npm audit fix` to fix them, or `npm audit` for details
Successfully 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代码格式化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • VScode格式化ESlint方法(最全最好用方法)

    VScode格式化ESlint方法(最全最好用方法)

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 背景: 近来研究前端,然后一直在百度上找VScode格式化(ESlint)的插件,结果找了半天都不靠谱.目前没有一个可以格式化html.css.符合ESlint的js.vue的插件,所以自己东拼西凑加实践找到解决方法. 解决方案: 1.安装插件 1)ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~

  • Vue-cli Eslint在vscode里代码自动格式化的方法

    编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu

  • vscode 配置vue+vetur+eslint+prettier自动格式化功能

    该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上. vscode ESlint插件 Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作. 基于vue-cli创建的项目 以下相关步骤需要注意: 创建的时候把Linter/For

  • vscode代码格式化和eslint的使用

    简介 今天看着写的代码越来越多后,发现自己读起都有点吃力了,哈哈,自己看着眼睛痛,就准备整顿一下,毕竟这个项目还要维护很久的,找解决方案和测试解决方案就用了一个半小时,严重开始怀疑自己的智商了.下面的目标让代码看起来很公正 代码编辑器 vscode version:版本 1.35.1 (1.35.1) 2019-06-12T14:19:05.197Z更新的 vscode代码格式化 因为目前公司就我一个后端,项目也不大,所以就采用这种方案,简单快捷粗暴. 一.点击code->preferences

  • 提高团队代码质量利器ESLint及Prettier详解

    目录 正文 ESLint VUE 项目的规则 Prettier ESLint 与 Prettier 正文 每个开发人员都有独特的代码编写风格和不同的文本编辑器.在团队项目开发过程,不能强迫每个团队成员都写一样的代码风格. 可能会看到以下部分(或全部)内容: 缺少分号: 有单引号.双引号,风格不一致: 一些行之间有大量的空格,而其他行之间没有空格: 在使向右滚动多年以查看其中包含的所有内容的行上运行: 看似随意的缩进: 注释掉代码块: 初始化但未使用的变量: 一些使用“严格”JS 的文件和其他不使

  • vscode使用官方C/C++插件无法进行代码格式化问题

    官方的C/C++插件是支持使用.clang-format配置文件进行自定义风格代码格式化的,无需另外安装clang-format插件. 但是使用clang-format -style=llvm -dump-config > .clang-format导出的默认配置文件进行格式化的时候会有一些小问题.如图 根据输出窗口的提示,是第94行出现了无法识别的key: 将.clang-format中第93~96行的代码加上注释就解决了: 至于为啥,笔者估计是官方插件还不支持RawStringFormats

  • vscode中vue-cli项目es-lint的配置方法

    本文主要介绍vscode中 vue项目es-lint的配置,有任何错误的地方欢迎大佬指出 开始 安装插件 如图所示: vscode设置 安装完成之后,到vscode中的 文件-->首选项-->设置 中 添加如下代码 "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", "html",

  • 关于.prettierrc代码格式化配置方式

    目录 prettierrc的使用 prettierrc规则配置 一些问题 代码的规范规则很多很繁琐,不可能每个都去手动修改,有时候一个页面能有上百个规范问题,那么这时候代码自动格式化就很有用了,最有名的就是prettierrc了. 当然还有其他的比如vue用的vetur.beautify格式化插件等. 格式化插件再配合eslint规范这样写出来的代码又好看效率又高,至于eslintrc的介绍可以点击=>eslintrc介绍及使用学习下,这样一个负责检查,一个负责改,完美! prettierrc的

  • 详解VS Code使用之Vue工程配置format代码格式化

    编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu

  • 使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

    在终端中运行以下命令: vue create xxx // xxx为项目名称,例如 vue-project 然后,系统会提示我们选择默认预设或手动选择功能.使用向下箭头键,我们手动选择功能,然后按Enter键. 然后,我们将看到一系列功能选项.使用向下箭头键,我们将向下移动并使用空格键选择需要的功能,然后按回车键. Linter / Formatter 就是代码风格. 我们将使用 ESLint + Prettier 我们将在保存时添加Lint的附加功能. 我们将选择单独的配置文件. 我们可以选择

  • Eclipse代码格式化设置简单介绍

    自用项目中统一Eclipse格式化Java.JavaScript.JSP.HTML代码设置 1.Window->Preferences //Java 格式化 2.Java->Code Style->Formatter->New->Edit->Line Wrapping 3.Maximum Line width = 180 4.Set line width for preview window = 180 //JavaScript 格式化 5.JavaScript->

  • 美化你的代码 vb(VBS)代码格式化的实现代码

    不过VB.NET确实有许多VB6没有的新功能,代码的自动排版就是一项,这也正是我们今天要实现的功能--VB代码格式化. 先看下实现的效果: 格式化前: 复制代码 代码如下: For i = 0 To WebBrowser1.Document.All.length - 1 If WebBrowser1.Document.All(i).tagName = "HTML" Then strContent = strContent & WebBrowser1.Document.All(i

随机推荐