博客
关于我
前端工程化:wepy配置vscode代码格式化
阅读量:304 次
发布时间:2019-03-01

本文共 984 字,大约阅读时间需要 3 分钟。

Vetur插件配置指南

安装插件Vetur是一个强大的Vue工具链插件,安装前可以通过以下步骤完成配置:

  • 打开你的项目,在终端输入以下命令安装插件:
  • npm install vetur-wepy --save-dev

    创建配置文件在你的项目根目录下,新建一个.vscode/settings.json文件,添加必要的配置内容:

    {    "editor.defaultFormatter": "hu2ren.vetur-wepy",    "vetur.validation.script": false,    "vetur.validation.interpolation": false,    "vetur.validation.template": false,    "vetur.format.defaultFormatter.js": "none",    "vetur.format.defaultFormatter.html": "js-beautify-html",    "editor.formatOnSave": true,    "eslint.run": "onSave",    "eslint.validate": ["vue"],    "editor.codeActionsOnSave": {        "source.fixAll": true,        "source.fixAll.stylelint": true    }}

    配置说明上述配置文件主要包含以下几个关键设置:

    • editor.defaultFormatter:指定代码格式化器,默认使用Vetur的formatter。
    • vetur.format.defaultFormatter.html:设置HTML文件的格式化方式。
    • editor.formatOnSave:启用格式化保存功能。
    • eslint.run:设置ESLint的运行方式。
    • editor.codeActionsOnSave:定义保存时的代码修复规则。

    结果测试在完成以上配置后,你可以按照以下步骤进行测试:

  • 保存你的HTML、CSS或JS文件
  • IDE会自动触发格式化和校验
  • 查看输出结果,确保格式正确
  • 通过以上配置,你可以在每次保存时自动校验代码格式和ESLint规则,提升开发效率。

    转载地址:http://rmpo.baihongyu.com/

    你可能感兴趣的文章
    npm run build部署到云服务器中的Nginx(图文配置)
    查看>>
    npm run dev 和npm dev、npm run start和npm start、npm run serve和npm serve等的区别
    查看>>
    npm run dev 报错PS ‘vite‘ 不是内部或外部命令,也不是可运行的程序或批处理文件。
    查看>>
    npm scripts 使用指南
    查看>>
    npm should be run outside of the node repl, in your normal shell
    查看>>
    npm start运行了什么
    查看>>
    npm WARN deprecated core-js@2.6.12 core-js@<3.3 is no longer maintained and not recommended for usa
    查看>>
    npm 下载依赖慢的解决方案(亲测有效)
    查看>>
    npm 安装依赖过程中报错:Error: Can‘t find Python executable “python“, you can set the PYTHON env variable
    查看>>
    npm.taobao.org 淘宝 npm 镜像证书过期?这样解决!
    查看>>
    npm—小记
    查看>>
    npm上传自己的项目
    查看>>
    npm介绍以及常用命令
    查看>>
    NPM使用前设置和升级
    查看>>
    npm入门,这篇就够了
    查看>>
    npm切换到淘宝源
    查看>>
    npm切换源淘宝源的两种方法
    查看>>
    npm前端包管理工具简介---npm工作笔记001
    查看>>
    npm包管理深度探索:从基础到进阶全面教程!
    查看>>
    npm升级以及使用淘宝npm镜像
    查看>>