您现在的位置是:首页 > 正文

前端学习笔记(1)-vue相关格式化插件集成

2024-02-29 15:12:14阅读 0

1.安装插件


1.1 Prettier


它通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制执行一致的样式,并在必要时包装代码。如今,它已成为解决所有代码格式问题的优选方案;支持 JavaScript、Flow、 TypeScript、 CSS、 SCSS、 Less、 JSX、 Vue、 GraphQL、 JSON、 Markdown 等语言.这里我们需要让Prettier和Eslint结合,检测代码中潜在问题的同时,还能统一团队代码风格,从而促使写出高质量代码,来提升工作效率。我们要的不仅是检测问题,还有就是自动修复问题。

1.2 ESLint


ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。更详尽的参考ESlint中文网

1.3 Vetur


vscode下一款优秀的vue开发插件,具有如下特征

  • 语法高亮
  • Snippet
  • Emmet
  • 错误检测
  • 格式化
  • 智能感知


更详尽的参考官方文档

2.安装方法(以Prettier为例子)

(1)命令安装

npm install prettier --save-dev


(2)插件安装
安装 Prettier插件 Prettier - Code formatter,安装好了以后在项目中配置.prettierrc文件,配置好了以后按住 shift+alt+f 理论上是可以格式化代码的。
vscode安装插件如下:

3.配置

  1. Ctrl+Shift+P
  2. 搜索settings.json
  3. 选择Prefrerences:Open Settings(JSON)
  4. 有UI操作步骤,有兴趣的童鞋可以试试File-Prefrerences-Settings
  5. 然后把如下配置复制保存


{
    "editor.fontSize": 17,//编辑器字体大小
    "[scss]": {
        "editor.defaultFormatter": "michelemelluso.code-beautifier"
    },//scss格式化工具
    "workbench.iconTheme": "vscode-icons",//vscode文件图标主题
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",//默认终端shell
    "go.formatTool": "goimports",//golang格式化工具
    "editor.defaultFormatter": "esbenp.prettier-vscode", //编辑器格式化工具
    "[javascript]": {
      "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },//javascript格式化工具
    "[vue]": {
      "editor.defaultFormatter": "octref.vetur"
    },//vue格式化工具
    "editor.insertSpaces": false,
    "workbench.editor.enablePreview": false, //打开文件不覆盖
    "search.followSymlinks": false, //关闭rg.exe进程
    "editor.minimap.enabled": false, //关闭快速预览
    "files.autoSave": "afterDelay", //编辑自动保存
    "editor.lineNumbers": "on", //开启行数提示
    "editor.quickSuggestions": {
      //开启自动显示建议
      "other": true,
      "comments": true,
      "strings": true
    },
    "editor.tabSize": 2, //制表符符号eslint
    "editor.formatOnSave": true, //每次保存自动格式化
    // "eslint.codeActionsOnSave": {
    //     "source.fixAll.eslint": true
    // },
    "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
    "prettier.semi": true, //去掉代码结尾的分号
    "prettier.singleQuote": false, //使用单引号替代双引号
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force-aligned" //属性强制折行对齐
      },
      "prettier": {
        "semi": false,
        "singleQuote": true
      },
      "vscode-typescript": {
        "semi": false,
        "singleQuote": true
      }
    },
    "eslint.validate": [
      "vue",
      // "javascript",
      "typescript",
      "typescriptreact",
      "html"
    ],
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
}

配置完成 ,在代码页面按保存键或者Ctrl+S,代码显得更简洁规范了。
 

网站文章

  • 为程序员量身定制的12个目标

    为程序员量身定制的12个目标ugmbbc发布于 2012-01-15 11:53:19|13029 次阅读 字体:大 小 打印预览 [分享至腾讯微博] [分享到QQ空间] 分享至新浪微博 转贴到开心网 分享到校内人人网 添加到Google书签cnBeta 博文精选感谢伯乐的投递对程序员们来说挑战自我非常重要,要么不断创新,要么技术停滞不前。新年伊始,我整理了12个月的目标,...

    2024-02-29 15:11:44
  • 学习JQuery的toggle()遇到的问题

    翠和他都让我平时多写博客记录自己遇到的问题,总结的方法等。我总是没有践行,不以为意。今天开始记录我遇到的问题,以后再来解决,不知道堵在哪里了。最后发现,竟然是JQuery库文件的原因,换了一个库文件,马上就可以执行了。 初始化 $(function(){ $("#btn").bind("click",function(){ var $content=$(

    2024-02-29 15:11:35
  • 影片推荐系统思考以及用spark.mllib.ALS实现最简单的推荐

    影片推荐系统思考以及用spark.mllib.ALS实现最简单的推荐

    影片推荐系统思考 1、用户信息的补充和处理 背景:智能电视通过机顶盒向用户分发电视节目。事先采集的用户信息及其有限。且电视节目的用户大多以家庭为单位,用户画像也相应呈现出家庭的特征,各项属性,如年龄,...

    2024-02-29 15:11:29
  • DB9接口详解---DB9引脚在 UART,CAN,RS485中的定义

    DB9接口详解---DB9引脚在 UART,CAN,RS485中的定义

    DB9端口的线缆在串行通信中使用较为普遍,本文将围绕DB9端口的定义、测试、产品以及连接方式等内容,详细介绍DB9端口。

    2024-02-29 15:10:59
  • 第三屏屏闪的原因分析

    第三屏屏闪的原因分析

    第三屏屏闪原因分析

    2024-02-29 15:10:52
  • 作为Java后台,这些都不会的话,就别去面试了 热门推荐

    作为Java后台,这些都不会的话,就别去面试了 热门推荐

    还有,ConcurrentHashMap的设计思路和HashMap是同步的,也就是说,ConcurrentHashMap除了锁机制这块的处理与HashMap不同,数组+链表(+红黑树)是和HashMa...

    2024-02-29 15:10:45
  • 【机器学习】,正则化惩罚(实例+图示+解释)

    【机器学习】,正则化惩罚(实例+图示+解释)

    在机器学习特别是深度学习中,我们通过大量数据集希望训练得到精确、泛化能力强的模型,对于生活中的对象越简洁、抽象就越容易描述和分别,相反,对象越具体、复杂、明显就越不容易描述区分,描述区分的泛化能力就越...

    2024-02-29 15:10:37
  • 01-Spring5框架之IOC(xml)注入属性操作

    01-Spring5框架之IOC(xml)注入属性操作

    01-Spring5框架之IOC(xml)注入属性操作

    2024-02-29 15:10:09
  • 2015年蓝桥杯省赛B组第8题--移动距离

    X星球居民小区的楼房全是一样的,并且按矩阵样式排列。其楼房的编号为1,2,3... 当排满一行时,从下一行相邻的楼往反方向排号。 比如:当小区排号宽度为6时,开始情形如下: 1 2 3 4 5 6 12 11 10 9 8 7 13 14 15 ..... 我们的问题是:已知了两个楼号m和n,需要求出它们之间的最短移动距离(不能斜线方向移动) 输入为3个

    2024-02-29 15:10:02
  • 小米 14 系列手机起售价 3999 元;新神经网络在语言归纳能力上接近人类;亚马逊推出人工智能图像生成功能|极客头条

    小米 14 系列手机起售价 3999 元;新神经网络在语言归纳能力上接近人类;亚马逊推出人工智能图像生成功能|极客头条

    「极客头条」—— 技术人员的新闻圈!

    2024-02-29 15:09:53