精华内容
下载资源
问答
  • atom编辑器 写vue代码 格式化代码

    千次阅读 2018-09-29 16:35:25
    文章目录atom 安装插件 atom-beautify设置vue 个人设置 atom 安装插件 atom-beautify file->setting->install 搜索atom-beautify 安装 设置vue 个人设置 file->setting->plugin -&...

    atom 安装插件 atom-beautify

    file->setting->install
    搜索atom-beautify
    安装

    设置vue 个人设置

    file->setting->plugin ->atom-beautify->setting->vue

    展开全文
  • VSCode中Vue代码格式化

    千次阅读 2019-05-28 20:40:56
    我们在编辑代码的时候,...可最近在使用vscode格式化vue代码的时候,没有实现预期的效果.如下代码格式: <div class="td"> <input type="text" class="form-control" placeholder="请输入用户名" &g...

    我们在编辑代码的时候,经常会使用代码格式化的操作,来使我们的代码更加的美观,容易阅读,还能使心情舒畅.可最近在使用vscode格式化vue代码的时候,没有实现预期的效果.如下代码格式:

    <div class="td">
      <input
        type="text"
        class="form-control"
        placeholder="请输入用户名"
      >
    </div>

    这是格式化后大代码,input元素内每个属性都换行了,我不喜欢这种代码格式,代码看起来很乱,我预期的效果是input的所有属性都显示到一行,如果当前行的空间能够放的开的话.所以我想修改一下编辑器格式化vue文件的方式.如下步骤,依次打开code-首选项-设置,

     在打开的设置页面搜索区域搜索vetur.format.defaultFormatter.html,结果如下:

    搜索的vetur.format.defaultFormatter.html配置项有none、prettyhtml、js-beautify-html、prettier4个选项,我们可以选择none和prettyhtml可以实现前面我预期的将input所有属性展示到一行的效果,选择js-beautify-html和prettier两个属性会将各属性分开显示到不同的行展示.这里我选择了prettyhtml,实现了我的预期效果,如下:

    <div class="td">
      <input type="text" class="form-control" placeholder="请输入用户名">
    </div>

     

    展开全文
  • vscode中使用beautify插件格式化vue文件

    千次阅读 2019-08-19 19:35:28
    点击设置,找到beautify.language并在html一栏里加上vue, 打开文件——首选项——设置—— “beautify.language”: { “js”: { “type”: [ “javascript”, “json” ], “filename”: [ “.jshintrc”, “.js...

    博主重新安装vscode之后出现 .vue 文件没办法进行代码格式化的问题,查看插件,确定已经安装了beautiful的插件,寻找原因,发现是因为插件的配置文件有问题,以下是解决方法。

    点击设置,找到beautify.language并在html一栏里加上vue,
    打开(左上角)文件——首选项——设置,
    找到如下位置:
    在这里插入图片描述
    点击编辑,会出现如下代码:

    {
        "explorer.confirmDelete": false,
        "editor.quickSuggestions": {
            "strings": true
        },
        "workbench.iconTheme": "vscode-icons",
        "[javascript]": {
            "editor.defaultFormatter": "HookyQR.beautify"
        }
    }
    

    进行修改,添加如下代码:

    "beautify.language": {
            "js": {
                "type": [
                    "javascript",
                    "json"
                ],
                "filename": [
                    ".jshintrc",
                    ".jsbeautify"
                ]
            },
            "css": [
                "css",
                "scss"
            ],
            "html": [
                "htm",
                "html",
                "vue"//在这里加上vue
            ]
        }
    

    现在放上去完整版的代码:

    {
        "explorer.confirmDelete": false,
        "editor.quickSuggestions": {
            "strings": true
        },
        "workbench.iconTheme": "vscode-icons",
        "[javascript]": {
            "editor.defaultFormatter": "HookyQR.beautify"
        },
        "beautify.language": {
            "js": {
                "type": [
                    "javascript",
                    "json"
                ],
                "filename": [
                    ".jshintrc",
                    ".jsbeautify"
                ]
            },
            "css": [
                "css",
                "scss"
            ],
            "html": [
                "htm",
                "html",
                "vue" //在这里加上vue
            ]
        }
    }
    
    
    
    展开全文
  • 一个vue脚手架搭的项目;ubuntu18.04 npm搭建 npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. ...

    准备:vscode安装插件 eslint、vetur、prettier;一个vue脚手架搭的项目;ubuntu18.04

    npm搭建

    npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.
    
    See `npm help init` for definitive documentation on these fields
    and exactly what they do.
    
    Use `npm install <pkg>` afterwards to install a package and
    save it as a dependency in the package.json file.
    
    Press ^C at any time to quit.
    package name: (other) project_name
    version: (1.0.0) 
    description: 
    entry point: (index.js) 
    test command: 
    git repository: 
    keywords: 
    author: dude
    license: (ISC) 
    About to write to /home/dude/Desktop/other/package.json:
    
    {
      "name": "project_name",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "dude",
      "license": "ISC"
    }
    
    
    Is this OK? (yes) 
    

    配置eslint

    如果项目目录下已有.eslintrc.js,删除后重新初始化,报ERR的话命令前面加sudo

    npm i -g eslint-config-standard

    初始化

    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 
    
    ? What type of modules does your project use? (Use arrow keys)
    ❯ JavaScript modules (import/export) 
      CommonJS (require/exports) 
      None of these 
    
    ? Which framework does your project use? 
      React 
    ❯ Vue.js 
      None of these 
    
    ? Does your project use TypeScript? (y/N) n
    
    ? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to inve
    rt selection)
    ❯◉ Browser
     ◯ Node
    
    ? How would you like to define a style for your project? 
      Use a popular style guide 
    ❯ Answer questions about your style 
      Inspect your JavaScript file(s) 
    
    ? What format do you want your config file to be in? (Use arrow keys)
    ❯ JavaScript 
      YAML 
      JSON 
    
    ? What style of indentation do you use?  # 空格缩进
      Tabs 
    ❯ Spaces 
    
    ? What quotes do you use for strings? # 单引号
      Double 
    ❯ Single 
    
    ? What line endings do you use? (Use arrow keys) # unix格式换行
    ❯ Unix 
      Windows 
    
    ? Do you require semicolons? (Y/n) n # 无分号
    

    打开.eslint.js文件,rules补充,参考 https://blog.guowenfh.com/2016/08/07/ESLint-Rules/     https://cn.eslint.org/docs/rules/

        indent: ["error", 4],
        "linebreak-style": ["error", "unix"],
        quotes: ["error", "single"],
        semi: ["error", "never"],

    打开workplace配置,file->preferences->setting,切换到文本,补充

    {
      "css.lint.ieHack": "warning",
      "javascript.format.semicolons": "remove",
      "typescript.format.enable": false,
      "typescript.format.semicolons": "remove",
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      "vetur.format.defaultFormatter.js": "prettier-eslint",
      "editor.codeActionsOnSave": {
        "source.fixAll": true
      },
      "eslint.validate": ["javascript", "vue", "html"],
      "eslint.alwaysShowStatus": true,
      "eslint.format.enable": true,
      "javascript.preferences.quoteStyle": "single",
      "prettier.jsxSingleQuote": true,
      "prettier.singleQuote": true,
      "typescript.preferences.quoteStyle": "single",
      "editor.formatOnPaste": true,
      "editor.formatOnSave": true,
      "vetur.format.defaultFormatter.ts": "vscode-typescript",
      "vetur.format.options.tabSize": 4,
      "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_line_length": 120,
          "wrap_attributes": "auto",
          "end_with_newline": false,
          "tabWidth": 4
        }
      }
    }
    

    总结

    vue和js文件的保存和剪切是能够自动格式化,不过html的格式化还没有处理

    展开全文
  • vs code中Vue代码格式化的问题

    万次阅读 2018-06-19 09:01:58
    本文即将迁移至个人网站程序员导航站 - 博客栏 ...VSCode自从更新之后,vue文件的html代码格式化就失效了,而且vue文件中的js ,css格式化样式都变了,原因在于都采用了prettier 来格式化,而配置文件中vetur.format...
  • VSCODE的VUE代码格式化插件及配置

    千次阅读 2020-12-16 11:11:04
    1.引言 ...在vue文件,template 中注释 Ctrl+/ 代码 //<slot name="left" :itemLeft="itemLeft">{{ itemLeft }}</slot> 这是html代码,注释应该是这样: <!-- <slot name="left" .
  • // 每次保存的时候将代码按eslint格式进行修复 "source.fixAll.eslint" : true } , "javascript.format.insertSpaceBeforeFunctionParenthesis" : true , //让函数(名)和后面的括号之间加个空格 ...
  • npm i vue-codemirror -S //使用 <codemirror ref="chartOption" :value="mirrorCode"//响应式使用v-model :options="cmOptions" @change="mirrorCodeChange"> </codemirror> import {code...
  • 主要实现代码的编辑功能、插入一些变量功能、beautify插件主要用来格式化代码,实现代码美化效果。不过这两年做项目都是用vue了,需要用到代码编辑器,于是我又找到了代码编辑器vue-codemirror,感觉组件再变,其...
  • 播放音乐 vscode-styled-components styled-components高亮支持 vscode-styled-jsx styled-jsx高亮支持 vue代码模板 { "Print to console": { "prefix": "vue", "body": [ " " ], "description": "Log output to ...
  • vscode格式化代码插件Beautify

    千次阅读 2019-01-27 23:45:00
    vscode格式化代码安装 VsCode 格式化代码插件搜索并安装 Beautify 格式化代码插件使用:打开要格式化的文件 —> F1 —> Beautify file —> 选择你要格式化的代码类型 格式化对齐快捷键:Windows: Ctrl + ...
  • Vue代码自动格式化

    2020-09-24 14:12:48
    用vscode写vue程序,实现代码的自动格式化。 首先安装插件: 然后进行配置: 依次点击顺序: File----》Preferences----》Settings 然后切换到文本格式,最后拷贝下面的内容 { // vscode默认启用了根据...
  • vsCode插件-------Beautify(格式化代码)

    千次阅读 2020-07-13 18:57:58
    Beautify config—>settings.json /// settings.json "editor.formatOnSave": true, // 保存后自动格式化 "beautify.language": { "js": { "type": [ "javascript", "json" ], "filename": [ //
  • 主要实现代码的编辑功能、插入一些变量功能、beautify插件主要用来格式化代码,实现代码美化效果。不过这两年做项目都是用vue了,需要用到代码编辑器,于是我又找到了代码编辑器vue-codemirror,感觉组件再变,其...
  • Prettier 是一个有见识的代码格式化工具。它通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制执行一致的样式...支持 JavaScript、 Flow、 TypeScript、 CSS、 SCSS、 Less、 JSX、 Vue、 GraphQL、 JS...
  • Vscode 格式化vue Template代码

    千次阅读 2018-07-18 15:10:31
    1.安装 vetur 2.在User Setting中增加设置: "vetur.format.defaultFormatter.html": "js-beautify-html" 3.搞定 格式化快捷键:Alt+Shift+F
  • Vue介绍

    2020-03-19 10:30:43
    VSCode插件安装 后面开发Vue项目,使用.vue的单文件开发,就需要一些插件来帮我们识别.vue文件。插件安装在Extension中,点...Beautify:一键美化代码的插件。 Vetur:.vue文件识别插件。 Javascript(ES6) code snip...
  • 说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些 但没办法,接下来做微服务架构,前端就用 vue,这块你负责。。。。说多了都是泪,脚手架框架布了都没看过 干就完事,不过好在做好了,...
  • vuevue的使用(一)

    2020-09-15 11:41:10
    1、vue的介绍 Vue(读音/vjuː/,类似于view) 是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的,目前是全球“最”流行的前端框架。...Beautify:一键美化代码的插件。 Vetur:.vue文件识别插
  • setting { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候... // #每次保存的时候将代码...
  • 1.vscode基本使用 vscode插件安装:插件安装在extension中。 常用的几个小插件 jshint:js代码规范检查 Beautify:一键美化代码 Vetur:.vue文件识别 ...vue helper:一些vue代码的快捷代码 vscode-
  • Vue 介绍 -1

    2020-03-31 04:03:59
    VSCode插件安装 开发 Vue 项目,使用 .vue 的单文件开发,就需要一些插件来帮我们识别 .vue 文件。插件安装在 Extension 中,点开即可...Beautify :一键美化代码的插件。 Vetur : .vue 文件识别插件。 Javascript...
  • // #vue组件中html代码格式化样式 } }, // 格式化stylus, 需安装Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒号 "stylusSupremacy.insertSemicolons": false, // 是否插入...
  • 1、Vue介绍 VSCode插件安装 后面开发Vue项目,使用.vue的单文件开发,就需要一些插件来帮我们识别.vue文件。插件安装在Extension中,点开即可看到一个搜索按钮,可以输入关键字搜索...jshint:js代码规范检查。 B...
  • vendors: ['vue', 'vue-resource', 'vue-router', 'vuex', 'mint-ui', 'moment', 'vue-preview'] }, 3. plugin中配置插件 // 分离第三方包插件 new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', ...
  • VUE的基本使用(上)

    2020-04-08 17:35:41
    Beautify:一键美化代码的插件。 Vetur:.vue文件识别插件。 Javascript(ES6) code snippets:ES6语法提示。 Auto Rename Tag:自动重命名标签。标签都是成对出现的,开始标签修改了,结束标签也会跟着修改。 Auto ...
  • Vue开发VSCode插件安装

    2020-09-17 17:48:30
    Beautify:一键美化代码的插件。 Vetur:.vue文件识别插件。 Javascript(ES6) code snippets:ES6语法提示。 Auto Rename Tag:自动重命名标签。标签都是成对出现的,开始标签修改了,结束标签也会跟着修.
  • Vue 介绍

    2020-03-17 16:24:29
    后开发 Vue 项目,使用 .vue 的单文件开发,就需要一些插件来帮我们识别 .vue 文件。插件安装在 Extension 中,点开即可看到一个搜索按钮,可以输入关键字搜索自己想要的插件。 推荐的几个插件: jshint :js ...
  • VSCode 常用插件 -vue

    2020-02-20 11:52:51
    3、代码美化 Beautify 4、代码检查工具 ESLint 5、必备调试工具 Debugger for Chrome 6、万能语言运行环境 Code Runner 7、快速注释 Document This 8、CSS 类名智能提示 IntelliSense for CSS class names in HTML 9...
  • 2.Beautify:一键美化代码的插件 3.Vetur:.vue文件识别插件 4.Javascript(ES6) code snippets:ES6语法提示。 5.Auto Rename Tag:自动重命名标签。标签都是成对出现的,开始标签修改了,结束标签也会跟着修改。 6....

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 327
精华内容 130
关键字:

beautify美化vue代码

vue 订阅