精华内容
下载资源
问答
  • prettier

    2020-09-21 11:55:02
    保存一套prettier规则 { // 使能每一种语言默认格式化规则 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "...

    保存一套prettier规则

    {
        // 使能每一种语言默认格式化规则
        "[html]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "[css]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "[less]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "[javascript]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
    
        /*  prettier的配置 */
        "prettier.printWidth": 100, // 超过最大值换行
        "prettier.tabWidth": 4, // 缩进字节数
        "prettier.useTabs": false, // 缩进不使用tab,使用空格
        "prettier.semi": true, // 句尾添加分号
        "prettier.singleQuote": true, // 使用单引号代替双引号
        "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
        "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
        "prettier.bracketSpacing": true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }"
        "prettier.disableLanguages": ["vue"], // 不格式化vue文件,vue文件的格式化单独设置
        "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
        "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
        "prettier.htmlWhitespaceSensitivity": "ignore",
        "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
        "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
        "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
        "prettier.parser": "babylon", // 格式化的解析器,默认是babylon
        "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
        "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
        "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
        "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
    }


     

    展开全文
  • Prettier

    2017-10-11 07:51:25
    官网链接:Prettier 为什么用 Prettier 目前为止最大的原因是,Prettier 可以停止无休止的关于代码格式的撕逼。一般情况下,项目和团队都希望有一套统一的编码格式,但执行起来却很痛苦。工程师们对逼迫着按照某种...

    官网链接:Prettier

    为什么用 Prettier

    目前为止最大的原因是,Prettier 可以停止无休止的关于代码格式的撕逼。
    一般情况下,项目和团队都希望有一套统一的编码格式,但执行起来却很痛苦。工程师们对逼迫着按照某种格式编码特别反感,更别说还要而外花费时间做这件事。

    怎么用

    安装

    通过 yarn:yarn add prettier --devyarn global add prettier
    通过 npm:npm install [--save-dev|--global] prettier

    CLI 命令使用

    命令:
    prettier [opts] [filename ...]

    格式化并替换文件:
    prettier file --write

    实际场景:
    prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"

    ESLint

    使用 eslint-plugin-prettier ,将其作为 ESLint 的一个插件

    yarn add --dev prettier eslint-plugin-prettier
    
    // .eslintrc.json
    {
      "plugins": [
        "prettier"
      ],
      "rules": {
        "prettier/prettier": "error"
      }
    }复制代码

    建议使用 eslint-config-prettier 覆盖掉其他已有规则

    yarn add --dev eslint-config-prettier
    
    // .eslintrc.json:
    {
      "extends": [
        "prettier"
      ]
    }复制代码

    Pre-commit Hook 提交前的钩子中使用

    git add 后自动格式化代码,三种方式:

    1. lint-staged

    通过 husky 实现,需要安装 husky 和 lint-staged:

    yarn add lint-staged husky --dev
    
    // package.json
    {
      "scripts": {
        "precommit": "lint-staged"
      },
      "lint-staged": {
        "*.{js,json,css}": [
          "prettier --write",
          "git add"
        ]
      }
    }复制代码

    不过有一点问题
    可查看 github.com/okonet/lint… 查看详细配置

    2. pre-commit

    将如下内容拷贝至 .pre-commit-config.yaml 文件

    -   repo: https://github.com/prettier/prettier
        sha: ''  # Use the sha or tag you want to point at
        hooks:
        -   id: prettier复制代码

    详情查看 github.com/awebdevelop…

    3. bash script

    把下面的脚本添加到 .git/hooks/pre-commit,可能需要修改脚本的执行权限

    #!/bin/sh
    jsfiles=$(git diff --cached --name-only --diff-filter=ACM | grep '\.jsx\?$' | tr '\n' ' ')
    [ -z "$jsfiles" ] && exit 0
    
    # Prettify all staged .js files
    echo "$jsfiles" | xargs ./node_modules/.bin/prettier --write
    
    # Add back the modified/prettified files to staging
    echo "$jsfiles" | xargs git add
    
    exit 0复制代码

    为什么只是 js 文件???

    需要注意的是:

    1. 需要在本地安装 Prettier:npm install prettier
    2. 因为 .git 默认不会提交,所以这种方式适用于个人使用,如有需要,也可同步给其他人

    通过 API 使用

    Options 参数

    Prettier 提供少量自定义的参数设置,可以用于 CLI 和 API 调用。如 Print Width,Tab Width,Tabs,Semicolons,Quotes 等。
    详情查看文档

    配置文件

    Prettier 通过 cosmiconfig 模式定义配置文件,意味着你可以定义如下格式:

    • .prettierrc file, 内容可以是 YAML 或 JSON, 后缀可以是: .yaml/.yml/.json/.js.
    • prettier.config.js 内容是 object.
    • "prettier" 通过在 package.json 指定 key:value 形式.

    配置内容同 API option,举例:

    JSON:

    // .prettierrc
    {
      "printWidth": 100,
      "parser": "flow"
    }复制代码

    YAML:

    # .prettierrc
    printWidth: 100
    parser: flow复制代码

    覆盖重写

    Prettier 参照 ESLint 提供了覆盖模式

    JSON:

    {
      "semi": false,
      "overrides": [{
        "files": "*.test.js",
        "options": {
          "semi": true
        }
      }]
    }复制代码

    YAML:

    semi: false
    overrides:
    - files: "*.test.js"
      options:
        semi: true复制代码

    files 和 excludeFiles 可以是字符串或字符串数组

    编辑器集成

    支持 Atom,Emacs,Vim,Visual Studio Code,Visual Studio,Sublime Text,JetBrains WebStorm, PHPStorm, PyCharm 等

    比如 Sublime Text,搜索安装 jsPrettier 即可使用,前提是不做特殊配置

    支持的脚本语言

    所有的 javascript 语法,包含非标准化的。可以使用 API parser 或 CLI --parser 指定编译器。
    所有的 JSX 和 Flow 语法
    其他如 TypeScript(^2.1.3), CSS, Less, SCSS, JSON, and GraphQL 语法

    展开全文
  • Prettier Formatter for Visual Studio Code Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum ...
  • warning Delete `␍` prettier/prettier error Delete `⏎` prettier/prettier 这个问题是结尾换行符引起的 在vscode中能查看当前换行符的类型 解决的办法 1. 执行命令自动修复问题 npm run lint --fix ...

    在VSCode中启动vue项目时,eslint(prettier/prettier) 一直提示,terminal会产生报错,如下图所示

    出现这个错误的原因是结尾换行符不匹配,windows默认的是CRLF,mac\linux默认的是LF。

    总结了几种解决的方法,如下:

    1. 在VSCode编辑器右下角能查看当前换行符的类型,点击该换行符类型图标可以手动切换;

    2. 执行命令自动修复问题;

    npm run lint --fix

    3. eslint配置规则,不检查结尾换行符。

    展开全文
  • 注意:如果要回退到较早版本的prettier / vim-prettier,请将其添加到您的.vimrc : Plug ' prettier/vim-prettier ' , { \ ' do ' : ' yarn install ' , \ ' branch ' : ' release/0.x ' \ } 默认情况下,它...
  • 更漂亮的配置 首选 Prettier 配置。
  • prettier-config-thealexpatin Alex Patin首选的配置 用法 安装: $ npm install -D prettier-config-thealexpatin 创建.prettier.config.js // .prettier.config.js module . exports = require ( "prettier-...
  • 安装@newhighsco/prettier-config和@newhighsco/prettier-config : npm install --save-dev prettier @newhighsco/prettier-config 用法 新的High Score Prettier规则捆绑在@newhighsco/prettier-config 。 要启用...
  • 除了通过Prettier API处理.elm文件之外,该插件还允许您在markdown文档中设置Elm代码块的格式。 例如, # Hello world in Elm ```elm import Html exposing ( text ) main = text " Hello, World! " ``` ...
  • prettier-eslint-cli在转发filePath等相关选项, prettier-eslint标识适用ESLint每个文件并使用它来确定选项配置prettier和eslint --fix 。 安装 该模块通过与捆绑在一起的分发,应作为项目的devDependencies之一...
  • Prettier can be run in your editor on-save, in a pre-commit hook, or in CI environments to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code ...
  • Adopting Prettier

    2021-01-07 04:07:54
    <div><p>Would you accept a PR adding prettier to the codebase and formatting all the code? If so, what would you prefer for prettier settings? From the limited code I've seen, it looks like 4 ...
  • spacemacs-prettier:将prettier-js格式化程序添加到本地spacemacs。 在MELPA上启动prettier-js之前的临时解决方案
  • Run prettier

    2020-12-08 20:30:49
    <p>so I added prettier on <code>pre-commit</code> and runned prettier for all files https://github.com/nozer/quill-delta-to-html/pull/69</p><p>该提问来源于开源项目:nozer/quill-delta-to-...
  • Codistica的默认Prettier配置。 工作正在进行中。
  • 漂亮的初始化 相互初始化prettier配置
  • Prettier Formatter

    2020-12-27 17:41:24
    Having been spoiled by prettier for basically every other language, it's annoying having to manually indent every line of the code. <p><strong>Describe the solution you'd like It'd be nice...
  • poc-javascript-prettier
  • 这样,您不仅可以享受到prettier的高级格式化功能的好处,而且还可以从eslint的配置功能中eslint 。 对于具有的扩展名的文件.css , .less , .scss ,或.json这只能运行prettier ,因为eslint不能处理这些。 安装...
  • 阿尔弗雷德·普雷蒂埃(Alfred Prettier)剪贴板 :artist_palette: 使用Prettier格式化剪贴板中的代码 为什么? 有时,您是在没有插件/扩展程序的文本区域中编写代码,因此无法自动设置代码格式。 您可以使用此...
  • Eslint & Prettier & prettier-eslint

    千次阅读 2020-02-21 16:14:08
    关于vscode代码格式化,有没有发现突然之前的配置不能用了呢 比如 "prettier.eslintIntegration": true ...在使用了prettier-eslint之后,才发现,原来每次格式化是先执行eslint再执行prettier 导致es...

     

    关于vscode代码格式化,有没有发现突然之前的配置不能用了呢

    比如"prettier.eslintIntegration"

    "prettier.eslintIntegration": true

    突然提示改为用prettier-eslint

    于是乎开始了各种更改配置,安装插件,查找配置项。。。但依然没有能恢复我之前的配置

    在使用了prettier-eslint之后,才发现,原来每次格式化是先执行eslint再执行prettier

    导致eslint有些配置被覆盖了

     

    。。。。

    最后发现prettier我根本用不着啊

    一个eslint足矣,解放了。。。。

    把prettier相关setting.json,配置文件全部拿掉,prettier,prettier-eslint全部卸载

    到此结束了。。。

    eslint配置项足够我用了。。。。eslint配置文件.eslintrc.js

    rules: {
        // allow async-await
        "generator-star-spacing": "off",
        // allow debugger during development
        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
        "vue/html-self-closing": "off",
        'vue/html-closing-bracket-newline': [2, { "multiline": "never" }],
        "vue/max-attributes-per-line": [
          "error",
          {
            multiline: {
              max: 1,
              allowFirstLine: true
            }
          }
        ],
        "vue/valid-v-for": 0,
        "vue/attributes-order": 0,
        "vue/require-default-prop": 0,
        "no-undef": "off",
        "no-unused-vars": 0,
        "no-useless-escape": 0,
        "no-console": 0,
        "no-control-regex": 0,
        camelcase: "off",
        "newline-per-chained-call": 2,
        semi: ["error", "never"], //其实是never,这里可以清晰看到prettier又把分号加回来了
        quotes: ['error', 'single'],
        'space-before-function-paren': ['error', 'never'],
        'func-call-spacing': ["error", "never"]
      },

    关于setting.json的配置坑

    "eslint.validate"变动

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

    "editor.formatOnSave"变动

    "editor.formatOnSave": true,
     
    
     "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true
      },
    {
      // vscode默认启用了根据文件类型自动设置tabsize的选项
      "editor.detectIndentation": false,
      // 重新设定tabsize
      "editor.tabSize": 2,
      // #每次保存的时候自动格式化
      "editor.formatOnSave": true,
      // #每次保存的时候将代码按eslint格式进行修复
      //"eslint.autoFixOnSave": true,   改成下面的"editor.codeActionsOnSave"
      "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true
      },
      // 添加 vue 支持
      "eslint.validate": [
        "javascript",
        "vue"
      ],
      //  #让prettier使用eslint的代码格式进行校验
      //"prettier.eslintIntegration": true,
      //  #去掉代码结尾的分号
      //"prettier.semi": false,
      //  #使用带引号替代双引号
      //"prettier.singleQuote": true,
      //  #让函数(名)和后面的括号之间加个空格
      //"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
      // #这个按用户自身习惯选择
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      // #让vue中的js按编辑器自带的ts格式进行格式化
      //"vetur.format.defaultFormatter.js": "vscode-typescript",
      "vetur.format.defaultFormatter.js": "vscode-typescript",
      //"vetur.format.defaultFormatter.html": "prettyhtml",
      //"vetur.format.defaultFormatter.js": "prettier",
      "vetur.format.defaultFormatterOptions": {
        "wrap_attributes": "force-aligned",
        "js-beautify-html": {
          // - auto: 仅在超出行长度时才对属性进行换行。
          // - force: 对除第一个属性外的其他每个属性进行换行。
          // - force-aligned: 对除第一个属性外的其他每个属性进行换行,并保持对齐。
          // - force-expand-multiline: 对每个属性进行换行。
          // - aligned-multiple: 当超出折行长度时,将属性进行垂直对齐。
          "wrap_attributes": "force-aligned"
          // #vue组件中html代码格式化样式
        }
      },
      // 格式化stylus, 需安装Manta's Stylus Supremacy插件
      // "stylusSupremacy.insertColons": false, // 是否插入冒号
      // "stylusSupremacy.insertSemicolons": false, // 是否插入分好
      // "stylusSupremacy.insertBraces": false, // 是否插入大括号
      // "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
      // "stylusSupremacy.insertNewLineAroundBlocks": false,
      "workbench.sideBar.location": "left",
      "files.autoGuessEncoding": true,
      "window.zoomLevel": 1,
      "editor.formatOnType": true,
      "editor.defaultFormatter": "dbaeumer.vscode-eslint",
      //"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
      // "editor.defaultFormatter": "esbenp.prettier-vscode",
      // "[javascript]": {
      //   "editor.defaultFormatter": "esbenp.prettier-vscode"
      // },
      // "vs-code-prettier-eslint.enabled":true,
      // "vs-code-prettier-eslint.eslintFileName":".eslintrc",
      // "vs-code-prettier-eslint.eslintFileType":"json",
      // "vs-code-prettier-eslint.prettierFileName":".prettierrc",
      // "vs-code-prettier-eslint.prettierFileType": "json",
      // "prettier.printWidth": null
    }

     

    展开全文
  • 在项目根目录下的.prettierrc文件中写入即可 "endOfLine": "auto" prettier Why do I keep getting Delete ‘cr’ [prettier/prettier]?
  • Delete `␍`eslint(prettier/prettier)错误

    万次阅读 2020-12-19 18:34:05
    今天提交代码的时候,控制台报的错误就有点吓人,一下子所有文件都有问题,吓死宝宝了,不要慌,接下来我们来解决这个问题吧 ...参考资料:“error Delete ⏎ prettier/prettier” in .vue files’’ 缺点
  • yarn global add prettier-md # or npm install -g prettier-md 用法 prettier-md filename.md prettier-md a.md b.md c.md 它搜索指定文件的所有JavaScript代码块: ```js // JS code here will be processed by ...
  • eslint-config-prettier Turns off all rules that are unnecessary or might conflict with Prettier. This lets you use your favorite shareable config without letting its stylistic choices get in the way ...
  • eslint-config-prettier 关闭所有不必要的规则或可能与冲突的规则。 这使您可以使用自己喜欢的可共享配置,而不会在使用Prettier时妨碍其样式选择。 请注意,此配置仅关闭规则,因此仅将其与其他配置一起使用才有...
  • 漂亮的GitHub 使用在GitHub注释中格式化代码 安装 GitHub应用 这是推荐和最简单的安装方法。...每当有人在注释中包含JavaScript代码块时,就会使用Prettier对其进行格式化。 之前: 后: 您可
  • Prettier的使用

    2020-12-04 21:25:11
    Prettier的使用前言一、安装Prettier二、Prettier的使用三、write参数总结 前言 Prettier是近两年来使用频率特别高的一款通用的前端代码格式化工具,它很强大,几乎能够完成所有类型代码文件的格式化工作,在日常...
  • Prettier的GitHub中已经有人提了issue:https://github.com/prettier/eslint-plugin-prettier/issues/114 原因 在Windows环境下,默认换行符的是CRLF,而我们Git拉去下来的代码会自动转换,换行符默认是LF 解决...
  • prettier-beauty-源码

    2021-05-09 20:22:16
    prettier-beauty + 支持格式化 .vue 单文件 单文件格式化 文件夹格式化 Useage 全局安装 npm i -g prettier-beauty prettier-beauty --entry=[entry] eg: prettier-beauty --entry=a/b.js prettier-beauty --entry=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,531
精华内容 4,212
关键字:

prettier