Vue中.prettierrc文件的常见配置(浅显易懂)

目录
  • .prettierrc文件常见配置
  • .prettierrc文件的作用

.prettierrc文件常见配置

当我们使用右键格式化的时候，就会自动帮我们补全符号，但是，有些符号在eslint中就会报语法错误，那我们需要怎么办呢？可以通过.prettierrc来进行文件配置

在文件的根目录建一个.prettierrc文件，在文件里写上如下代码：

{
    "semi": false,    // 使用分号, 默认true
    "singleQuote": true,   // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    "bracketSpacing": true   // 对象中的空格 默认true
}

.prettierrc文件的作用

使用vcode下载安装 Prettier - Code formatter

在 .prettierrc中 配置自己的代码格式，配置后重新启动项目

{
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "printWidth": 180
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中eslintrc.js配置最详细介绍

    本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /** * 参考文档 * [eslint英文文档]https://eslint.org/docs/user-guide/configuring * [eslint中文文档]http://eslint.cn/docs/rules/ */ /** * eslint有三种使用方式 * [1]js代码中通过注释

  • vscode 使用Prettier插件格式化配置使用代码详解

    参考 使用ESLint+Prettier来统一前端代码风格 vscode 配置vue+vetur+eslint+prettier自动格式化功能 问题描述 最近用Nodejs + express 写了一个zip文件上传的功能,代码给了别人看,各种吐槽,代码不规范,没有按照eslint,编辑器打开就是各种红色提醒,当然还有其他许多- 第一反应就是反感,后面冷静一想,还是自己做事的态度有问题,做完了功能已经完成了95%,为什么不到最后一步一键格式化,做到百分百呢?反思中 为了让以后代码美观,不让别人吐

  • 实例详解Vue项目使用eslint + prettier规范代码风格

    团队开发的项目,如果没有对代码风格作要求,有多少团队成员,就当然会出现多少种不同的代码风格.因此,我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目的代码风格. 幸好,我们有 eslint 和 prettier . eslint VS prettier 应该大多数项目都已经采用eslint来对代码进行质量检查,可能少部分还会采用其进行一定程度上的统一风格.那为什么还需要prettier呢?我们先来对它们作一个简单的了解. 各种linters 总体来说,linters有两种能力

  • vue3+ts+EsLint+Prettier规范代码的方法实现

    目录 使用 EsLint的使用 添加配置文件 Prettier的使用 使用husky和lint-staged构建代码 增加setting.json配置 参考资料 本文主要介绍在Vue3中使用TypeScript做开发时,如何安装与配置EsLint和Prettier,以提高编码规范. (1)EsLint 提供编码规范: (2)Prettier 是一个 Opinionated 的代码格式化工具. 使用 EsLint的使用 安装依赖 npm i -D eslint eslint-plugin-vue

  • Vue中.prettierrc文件的常见配置(浅显易懂)

    目录 .prettierrc文件常见配置 .prettierrc文件的作用 .prettierrc文件常见配置 当我们使用右键格式化的时候,就会自动帮我们补全符号,但是,有些符号在eslint中就会报语法错误,那我们需要怎么办呢?可以通过.prettierrc来进行文件配置 在文件的根目录建一个.prettierrc文件,在文件里写上如下代码: { "semi": false, // 使用分号, 默认true "singleQuote": true, // 使用单引

  • 解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

    解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

    1.在vue项目根目录下新建vue.config.js(不是在src下面) vue.config.js配置文件: module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vu

  • 图文详解vue中proto文件的函数调用

    图文详解vue中proto文件的函数调用

    1.编译proto 在src文件夹下新建proto文件夹用以存放所有的.proto文件.在proto文件夹下打开终端,输入如下命令: //进入proto文件夹执行下列编译,将helloworld.proto替换为当前的.proto文件名 protoc -I=. helloworld.proto \ --js_out=import_style=commonjs,binary:. \ --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. 一个

  • Apache服务器中.htaccess文件的实用配置示例集锦

    .htaccess 是什么? htaccess (hypertext access,超文本访问) 是为网站所有者提供用于控制服务器环境变量以及其它参数的选项,从而增强他们网站的功能的文件.这些文件可以在网站目录树的任何一个目录中,并向该目录以及目录中的文件和子目录提供功能. 这些功能是什么呢?其实这些是服务器的指令,例如命令服务器执行特定任务的行,这些命令只对该文件所在目录中的文件和子目录有效.这些文件默认是隐藏的,因为所有操作系统和网站服务器默认配置为忽略它们,但如果查看隐藏文件的话,你就可以

  • vue中的rem如何配置

    目录 vue中rem的配置 1.在js中统一计算进行配置 2.借助px2rem 插件 vue-cil 3.0 px自动转换为rem适配移动端 1.下载postcss-pxtorem.lib-flexible 2.配置main.js 3.根路径配置postcss.config.js vue中rem的配置 开发移动端,我们常常会因为把握不好尺度而觉得十分难受,因此可以用到rem+flex进行,那么vue中我们该如何如何配置呢? 1.在js中统一计算进行配置 新建src/utils/rem.js 代码

  • Vue中使用webpack别名的方法实例详解

    在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么

  • Vue中的循环及修改差值表达式的方法

    一.Vue中的循环 v-for 常见的4总情况 #第一种 <div v-for="item in items"></div> #第二种 <div v-for="(item, index) in items"></div> #第三种 <div v-for="(val, key) in object"></div> #第四种 <div v-for="(val, n

  • vue中常见的问题及解决方法总结（推荐）

    vue中常见的问题及解决方法总结（推荐）

    有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. 一种方法是通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法.具体细节请看下一节的<动态菜单>. 另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限.如果有权限就允许访问,没有

  • VUE中的打包删除文件、图片的HASH码

    目录 VUE打包删除文件.图片的HASH码 步骤 去掉map文件和图片及其他静态hash VUE打包后遇到的坑 打包之后打开dist的页面显示空白 打包后找不到响应路径 VUE打包删除文件.图片的HASH码 前言:vue打包的时候默认是会加hash加密的,很多时候不能这样,今天就遇到一个需求不要hash加密,很久没弄了就记录一下. 步骤 首先进入:进入项目->build ->webpack.prod.conf.js 找到 filename: utils.assetsPath('js/[name

随机推荐