zoukankan      html  css  js  c++  java
  • VS Code中Vetur与prettier、ESLint联合使用

    一、vue语法高亮

    1.1 安装Vetur

    1. 创建.vue文件, 写些代码, 发现一片漆黑

    2. 安装激活vetur插件, 代码就有高亮了. 右键菜单还会变多一些, 主要多了个格式化文档.

     

    这里配置了多个格式化的,所以会有多个。

    看下vetur的特性: 语法高亮, 代码片段(emmet给我的感觉是一个写好了的snippet), 质量提示&错误、格式化/风格、智能提示等。

    对于这些功能可以查看官方文档。 

    1.2 Vetur提示

    质量提示&错误之——提示即Lint

    红色圈起来的. 第一个链接, 赫然看见

    Install ESLint plugin for the best linting experience. Vetur's template linting is only for quick start and does not support rule configuration.

    vetur 的代码提示不支持任何配置, 建议安装ESLint.  

    格式化/风格——后面还会讲

    1. Vetur只支持整个文档格式化, 不支持选中某个片段格式化
    2. Vetur内嵌了如下格式化工具, 如果本地安装了相应版本, 则会使用本地安装的版本, 默认配置如图

    这里, 说一句:

    • ESLint主要负责: 质量检查(例如使用了某个变量却忘记了定义)、风格检查
    • 后面用到的Prettier主要负责: 风格检查, 没有质量检查

    二、安装ESLint

    1. 安装npm包

    npm install -D eslint

    2. 安装ESLint插件

    这时候, ESLint其实已经可以用了, 例如
     

    Vetur也继续可用

    3. 启用ESLint

    .vscode/settings.json文件(或者 code-》首选项-》设置-》工作区JSON)加入如下配置。会生成一个.vscode/setting.json文件

    复制代码
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "vue",
          "autoFix": true
        },
      ]
    复制代码

    有如下提示. 因为autoFix缺省是启用的. 改一下就行

     反正, ESLint 已经能够对 <template> 和 <script> 进行提示了

    三、 安装 eslint-plugin-vue

    vetur默认集成了一个eslint-plugin-vue版本来对<template>提示.

    可以参考文档:https://eslint.vuejs.org/user-guide/

    也可自己安装一个新的版本. 如果自己安装一个新的版本, 那么配置过程如下:

    1. .vscode/settings.json文件, 配置

    vetur.validation.template: false

    2. 安装eslint-plugin-vue插件

    npm install -D eslint-plugin-vue

    3. 配置.eslintrc文件, 配置方法也可以参考链接[link](https://github.com/octref/veturpack)

    PS:添加一个通用配置,可以参考:https://github.com/vuejs/eslint-config-vue。

    复制代码
    {
      "extends": [
        "eslint:recommended",
        "plugin:vue/recommended"
      ],
      "rules": {
        "vue/html-self-closing": "off"
      }
    }
    复制代码
    说明: eslint-plugin-vue把所有规则分为四个类别,依次为:base, essential, strongly-recommended, recommended, 链接 https://vuejs.github.io/eslint-plugin-vue/rules/

    四、vetur-设置风格工具

    vetur的默认代码风格工具如下. 前面截图过

    1
    2
    3
    4
    5
    6
    7
    8
    9
    "vetur.format.defaultFormatter.html""prettyhtml",
    "vetur.format.defaultFormatter.css""prettier",
    "vetur.format.defaultFormatter.postcss""prettier",
    "vetur.format.defaultFormatter.scss""prettier",
    "vetur.format.defaultFormatter.less""prettier",
    "vetur.format.defaultFormatter.stylus""stylus-supremacy",
    "vetur.format.defaultFormatter.js""prettier",
    "vetur.format.defaultFormatter.ts""prettier",
    "vetur.format.defaultFormatter.sass""sass-formatter"
    • 你可以完全关闭vetur, 而使用prettier. 我不建议这样做.
    • 有2个配置可以被格式化继承, 但是当.prettierrc和.eslintrc.js存在时,他会被覆盖. 
      "vetur.format.options.tabSize": 2,
      "vetur.format.options.useTabs": false

    我们拷贝一份到“用户设置”中.

    五、vetur-设置风格

    上面知道 vetur 可以设置不同的风格,这些风格可以共存也可以只设置为某一种,下面就是设置风格为:js-beautify-html 的具体配置
    1. 把 “"vetur.format.defaultFormatter.html": "prettyhtml",” 修改成

    "vetur.format.defaultFormatter.html": "js-beautify-html", 如下图

     2. 设置风格

    复制代码
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // js-beautify-html settings here
            "wrap_attributes": "auto", // 属性强制折行对齐
            "wrap_line_length": 0,     // 设置一行多少字符换行,设置为 0 表示不换行
            // "end_with_newline": true
            "semi": false,        // 
            "singleQuote": true     // 单引号
        }
    }
    复制代码

    怎么配置呢,这里是在线配置界面 beautifier , 配置完, 把配置贴过来, 效果就有了

    六、保存自动格式化

    下面是对自动保存时格式化的设置:

    复制代码
      "editor.formatOnSave": true, // 在保存时自动格式化
      "editor.formatOnType": false, // 在键入一行后是否自动化格式
      "editor.formatOnPaste": true, // 在粘贴时自动格式化
      "editor.wordWrap": "off", // 换行规则,off 永不换行
      "editor.detectIndentation": false, // vscode 默认是启用根据文件类型自动设置 tabSize 的值
      // 保存时按照哪个规则进行格式化
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
    复制代码

    七、vetur-prettier风格

    1. 设置prettier风格, 可以在.vscode/settings.json文件, 如下. 或者创建个.prettierrc.js文件. (在 .settings.json 配置的prettier风格, 有些老项目会不生效, 我也不知道为啥咯, 所以还是建议单独配置 )

    复制代码
    "vetur.format.defaultFormatterOptions": {
      "prettier": {
        // Prettier option here
        "trailingComma": "es5", // 多行时,尽可能打印尾随的逗号
        "tabWidth": 4, // 会忽略vetur的tabSize配置
        "useTabs": false, // 是否利用tab替代空格
        "semi": true, // 句尾是否加;
        "singleQuote": true, // 使用单引号而不是双引号
        "arrowParens": "avoid", // allow paren-less arrow functions 箭头函数的参数使用圆括号
      }
    }
    复制代码

    对于 prettier 的配置可以看这里:Prettier

    常用设置参考:

    .prettierrc文件格式

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

    2. vscode的tab缩进可以设置如下.

     3. 在“.prettierrc.js”中配置风格, vue文件可以格式化, 不支持js文件, 需要单独安装插件

    八、prettier和ESLint冲突

    1. 我们要安装2个插件

    • 安装eslint-config-prettier

    1) 禁用一些eslint和prettier冲突的规则, Turns off all rules that are unnecessary or might conflict with Prettier. 可以参考这里:eslint-config-prettier

    • 安装eslint-plugin-prettier.  调用 prettier 格式化代码,然后与格式化前对比,如果不一致,这个地方就会被 prettier 进行标记。

    1) 可以将prettier的规则设置为eslint的规则,对不符合规则的进行提示。(与eslint-plugin-vue相同)github link.  

    2) 使用 ESLint 与 eslint-plugin-prettier 的结果是最终得到的代码是充分尊重 Prettier 的结果

    不用的方案)prettier-eslint-cli 是先执行 prettier, 再自动使用 eslint --fix 将与 ESLint 规则冲突的代码修正成 ESLint 想要的. 这样引入 Prettier 不会影响原有的设置. 但是我们不用.

    2. 怎么配置

    eslint-config-* ,配置时写成: 
    注意: 确保将它放在 extends 数组的最后
    复制代码
    extends: 'prettier' // 使用的时候需要确保,这个配置在extends的最后一项。例如以下形式:
    //.eslintrc.js
    {
      extends: [
        'standard', // 使用standard做代码规范
        "prettier",
      ],
    }
    复制代码

    自定义规则使用 eslint-plugin-* 的命名,使用时写成

    1
    2
    3
    4
    plugins: ["prettier"],
     rules: {
       "prettier/prettier""error" // 表示被 prettier 标记的地方抛出错误
      }

    上面两项配置可以简化成

    {
      "extends": ["plugin:prettier/recommended"]
    }

    然后保存时, 和prettier冲突的就不会调整了.

    配置下面, 代码中的eslint提示就没有了

    parserOptions: {
        // parser: "babel"
        parser: ['babel-eslint','vue-eslint-parser',]
    }

    转发:https://www.cnblogs.com/zhurong/p/12766148.html

    转发:https://www.cnblogs.com/mspeer/p/12055962.html

    提供下简单配置总结:

    {
      "vetur.format.defaultFormatter.html": "prettyhtml",
      "vetur.format.defaultFormatter.css": "prettier",
      "vetur.format.defaultFormatter.postcss": "prettier",
      "vetur.format.defaultFormatter.scss": "prettier",
      "vetur.format.defaultFormatter.less": "prettier",
      "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
      "vetur.format.defaultFormatter.js": "prettier",
      "vetur.format.defaultFormatter.ts": "prettier",
      "vetur.format.defaultFormatter.sass": "sass-formatter",
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue"
      ],
      "vetur.format.defaultFormatterOptions": {
        "prettier": {
          // Prettier option here
          "trailingComma": "es5", // 多行时,尽可能打印尾随的逗号
          "tabWidth": 2, // 会忽略vetur的tabSize配置
          "useTabs": false, // 是否利用tab替代空格
          "semi": false, // 句尾是否加;
          "singleQuote": true, // 使用单引号而不是双引号
          "arrowParens": "avoid", // allow paren-less arrow functions 箭头函数的参数使用圆括号
        }
      },
      "editor.formatOnSave": false, // 在保存时自动格式化
      "editor.formatOnType": false, // 在键入一行后是否自动化格式
      "editor.formatOnPaste": false, // 在粘贴时自动格式化
      "editor.wordWrap": "off", // 换行规则,off 永不换行
      "editor.detectIndentation": false, // vscode 默认是启用根据文件类型自动设置 tabSize 的值
      "editor.tabSize": 2,
      "editor.insertSpaces": false,
      // 保存时按照哪个规则进行格式化
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "files.autoSave": "afterDelay",
      "files.autoSaveDelay": 10000
    }
  • 相关阅读:
    形象理解ERP(转)
    禁用windows server 2008 域密码复杂性要求策略
    How to adding find,filter,remove filter on display method Form
    Windows Server 2008 R2激活工具
    How to using bat command running VS development SSRS report
    Creating Your First Mac AppGetting Started
    Creating Your First Mac AppAdding a Track Object 添加一个 Track 对象
    Creating Your First Mac AppImplementing Action Methods 实现动作方法
    Creating Your First Mac AppReviewing the Code 审查代码
    Creating Your First Mac AppConfiguring the window 设置窗口
  • 原文地址:https://www.cnblogs.com/jeffhong99/p/13367551.html
Copyright © 2011-2022 走看看