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

编辑器另外一个很重要的功能就是代码格式化了，VS Code默认提供常见文件的格式化，如.js,.html等。

添加对.vue文件的格式化支持

这里我们添加对 .vue 文件的格式化支持。

1. 安装 Vetur 插件
2. 在 VS Code 的设置中添加如下规则：

{
   "vetur.format.defaultFormatter": {
    "html": "prettier",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier",
    "ts": "prettier",
    "stylus": "stylus-supremacy"
  }
}

这里是设置 Vetur 默认使用的格式化插件 prettier。 这样对于.vue文件中的 html 和 javascript 代码都有格式化支持了。

vue eslint 代码自动格式化

  1. vue-cli 代码风格为JavaScript Standard Style代码检查规范严格，一不小心就无法运行，使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码
  2. VSCode拓展插件推荐（HTML、Node、Vue、React开发均适用）

建议阅读：

  1. vscode插件推荐
  2. JavaScript Standard Style 代码风格规范

正文 eslint 自动格式化

配置环境:

npm i -g eslint-plugin-vue
#or
npm i -S eslint-plugin-vue

创建项目跟路径下的文件：.eslintrc | .eslint.js

//　添加插件
"plugins": [
  "vue"
]

在你的vscode设置文件里添加：

1、在vscode添加 eslint 插件
2、在vscode添加 vetur 插件
3、修改你的setting.json

// 添加进你的vscode的 setting.json

"eslint.autoFixOnSave": true,
"eslint.validate": [
  "javascript",{
    "language": "vue",
    "autoFix": true
  },"html",
  "vue"
],

参考文集：

https://stackoverflow.com/questions/45852531/eslint-code-format-in-vue
https://github.com/varHarrie/Dawn-Blossoms/issues/10

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue-cli实现多页面多路由的示例代码
  • Vue cli+mui 区域滚动的实例代码
  • Vue-cli 使用json server在本地模拟请求数据的示例代码
  • Vue-Cli中自定义过滤器的实现代码
  • vue2.0中vue-cli实现全选、单选计算总价格的实例代码
  • vue-cli+webpack在生成的项目中使用bootstrap实例代码
赞 (0)

相关推荐

  • vue-cli+webpack在生成的项目中使用bootstrap实例代码

    vue-cli+webpack在生成的项目中使用bootstrap实例代码

    在html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下. 脚手架生成项目 执行命令用webpack模板生成一个名为vuestrap的项目(名字任意) vue init webpack vuestrap 在出现的各提示选项中,没什么要求,为了方便,把不用的ESLint,unit tests,e2e都关掉(这些选项都随意). ? Project name v

  • Vue-cli 使用json server在本地模拟请求数据的示例代码

    Vue-cli 使用json server在本地模拟请求数据的示例代码

    写在前面: 开发的时候,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的.json server 作为模拟工具,因为设置简单,容易上手.本文是做一个简单的上手介绍,有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. json server 工具: 在后台还没给接口之前,使用JSON-Server搭建一台JSON服务器,将接口要返回的数据放在json文件里面.然后请求这些数据,这样我们可以先做

  • Vue-Cli中自定义过滤器的实现代码

    本文主要介绍了Vue-Cli中自定义过滤器,分享给大家,也给自己做个笔记 vue2里面移除了内置过滤器,所有过滤器都需要自己定义. 以下例子是使用webpack模版自定义一个日期格式过滤器的例子. 文件结构 . ├── src │ ├── Filters │ │ ├── DataFormat.js │ │ └── index.js │ └── main.js └── ... 所有过滤器都放在Filters文件夹下,剩下的就是webpack模版的文件结构,在这里就不完全写出来. Filters/D

  • vue-cli实现多页面多路由的示例代码

    vue-cli实现多页面多路由的示例代码

    项目下载地址 vue-cli多页面多路由项目示例:vue+webpack+vue-router+vuex+mock+axios Usage This is a project template for vue-cli. github上找到某大神的一个基于vue-cli模板的vueAdmin后台管理的模板,根据项目需求改成一个多页面多路由的vue项目. PC端:后台管理页面,单独的页面入口,单独的路由. 移动端:业务展示页面,单独的页面入口,单独的路由. 踩了无数的坑,终于是初见效果了,随后继续优

  • vue2.0中vue-cli实现全选、单选计算总价格的实例代码

    vue2.0中vue-cli实现全选、单选计算总价格的实例代码

    由于工作的需要并鉴于网上的vue2.0中vue-cli实现全选.单选方案不合适,自己写了一个简单实用的.就短短的126行代码. <template> <div> <table> <tr> <td><input type="checkbox" v-model="checkAll">全选({{checkedCount}})</td> <td>产品名称</td> &

  • Vue cli+mui 区域滚动的实例代码

    vue cli+mui配合使用达到区域滚到的效果 ,方法如下 第一步 引入mui css js @import url("/static/mui.min.css"); JS import mui from '../../../static/mui.min.js'; 第二步 写结构 mui的区域滚动结构是这样的 <div class="mui-scroll-wrapper"> <div class="mui-scroll">

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

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

  • vscode写python时的代码错误提醒和自动格式化的方法

    python的代码错误检查通常用pep8.pylint和flake8,自动格式化代码通常用autopep8.yapf.black.这些工具均可以利用pip进行安装,这里介绍传统的利用pip.exe安装和在VScode中安装两种方式. [温馨提醒] 要使用flake8或要想flake8等工具起作用,前提是必须把settings.json文件中的"python.linting.enabled"值设为"true",否则即使安装了这些工具,也起不到代码的错误提醒. [传统安

  • vue cli 3.x 项目部署到 github pages的方法

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

  • 使用mybatis-plus-generator进行代码自动生成的方法

    为了解放程序员的双手,减少重复性代码的编写,推荐使用插件:mybatis-plus-generator 进行代码自动生成.下面我将详细介绍通过mybatis-plus-generator 插件自动生成 controller.service.mapper.serviceImpl相关代码. 项目工程目录总览如下: 1. 使用 idea 创建 maven 项目,引入相关依赖,项目pom文件如下所示: <?xml version="1.0" encoding="UTF-8&qu

  • Intellij IDEA 录制快捷键实现自动格式化的方法

    问题描述 我们在写代码的时候,Intellij IDEA 提供了快捷键格式化代码,以 Mac 快捷键为列子就是 ctrl + alt + L.但是习惯了还好说,没有习惯的人总是忘记格式化代码,或者压根儿就没有格式化代码习惯的人就很头疼了. 那有没有一种插件让它一直自动格式化呢?或者我把格式化的快捷键设置为回车或者常用的分号:怎么样?这样就能在写代码的时候,顺手格式化了. 前者插件我是没有找到的. 后者快捷键设置为回车是不行的,根本没法设置回车为快捷键,然后如果直接设置分号为快捷键的话,分号便没有

  • 在vscode里使用.vue代码模板的方法

    在vscode里使用.vue代码模板的方法

    1.设置.vue模板 打开编辑器,点击文件 -- 首选项 -- 用户代码片段,会弹出来一个输入框. 在输入框输入vue,回车,会打开一个vue.json文件. 在里面复制以下代码: { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div class=\"container\"

  • win10环境下vscode Linux C++开发代码自动提示配置(基于WSL)

    安装 vs code, 安装 c/c++ 插件 C/C++ IntelliSense,TabNine,Bracket Pair Colorizer. 在win10下打开linux子系统设置(具体搜索教程),在应用商店安装ubutu16. 打开File->Preferences->settings,编辑settings.json. copy 以下的内容替换settings.json "C_Cpp.default.compilerPath": "/usr/bin/g+

  • python中如何设置代码自动提示

    第一步:打开pycharm,如下图所示: 第二步:File→Power Save Mode,把下面如图所示的勾去掉: 第三步:去掉勾后,不再使用省电模式,新建一个 python文件,输入需要输入的单词的前面的字母,就会自动提示了.如下图: 知识点扩展: Python代码的自动补全 我所知道的python编辑器有Pydev.Pycharm.Sublime.Eric.还有就是Vim.Emacs(听说VS也行). Pydev用过一段时间(半个月左右).Pycharm用的时间不超过2天(30天试用版).

  • vue+ESLint 配置保存 自动格式化代码

    1. 在.eslintrc.js 添加 vscode 终端启动服务 // 添加⾃定义规则 'prettier/prettier': [ // eslint校验不成功后,error或2则报错,warn或1则警告,off或0则⽆提示 'error', { singleQuote: true, semi: false, //结束是否加分号 printWidth: 160//每行最长字符 } ] 2.打开VS code 文件>首选项>设置>扩展>ESLint> // eslint格式

随机推荐