美文网首页前端大杂烩
在vscode内使用eslint和prettier格式化vue,

在vscode内使用eslint和prettier格式化vue,

作者: 写写而已 | 来源:发表于2019-12-23 10:50 被阅读0次

    先在vscode安装依赖的Vetur,ESlint,Prettier插件


    image.png

    打开配置信息
    在vscode设置中点击右上角的open settings(JSON)

    {
      "editor.minimap.enabled": true,
      "team.showWelcomeMessage": false,
      "editor.fontSize": 16,
      "search.followSymlinks": false,
      "workbench.colorTheme": "Material Theme Darker",
      "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "workbench.iconTheme": "vscode-icons",
      "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
      },
      "terminal.integrated.rendererType": "dom",
      "files.associations": {
        "*.wpy": "vue"
      },
      "git.confirmSync": false,
      // vscode默认启用了根据文件类型自动设置tabsize的选项
      "editor.detectIndentation": false,
      // 重新设定tabsize
      "editor.tabSize": 2,
      // #每次保存的时候自动格式化
      "editor.formatOnSave": true,
      // #每次保存的时候将代码按eslint格式进行修复
      "eslint.autoFixOnSave": true,
      // 添加 vue 支持
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "vue",
          "autoFix": true
        }
      ],
      // #去掉代码结尾的分号
      "prettier.semi": false,
      // #使用带引号替代双引号
      "prettier.singleQuote": true,
      // #让函数(名)和后面的括号之间加个空格
      "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
      // #这个按用户自身习惯选择
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      // #让vue中的js按编辑器自带的ts格式进行格式化
      "vetur.format.defaultFormatter.js": "vscode-typescript",
      "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_attributes": "force-aligned"
          // #vue组件中html代码格式化样式
        }
      },
      "workbench.activityBar.visible": true,
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
    }
    

    配置完成后重启vscode,发现vue文件能正常格式化了!
    好景不长啊。。。。。。
    后来更新vscode之后发现js文件格式化后又添加上分号和双引号了!
    网上苦苦搜寻,皇天不负有心人!
    在项目中安装prettier

    npm install prettier -D
    

    然后在项目主目录新建.prettierrc.json文件,注意前面的.点,写入

    {
      "singleQuote": true,
      "semi": false
    }
    

    其他参考文件

    // ---------------------- .eslintrc.js
    // https://eslint.org/docs/user-guide/configuring
    
    module.exports = {
      root: true,
      parserOptions: {
        parser: "babel-eslint"
      },
      env: {
        browser: true
      },
      globals: {
        scope: true
      },
      extends: [
        // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
        // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
        "plugin:vue/essential",
        // https://github.com/standard/standard/blob/master/docs/RULES-en.md
        "standard"
      ],
      // required to lint *.vue files
      plugins: ["vue"],
      // add your custom rules here
      rules: {
        // allow async-await
        "generator-star-spacing": "off",
        // allow debugger during development
        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
      }
    };
    // ---------------------- .eslintignore
    /build/
    /config/
    /dist/
    /*.js
    // ---------------------- .editorconfig
    root = true
    
    [*]
    charset = utf-8
    indent_style = space
    indent_size = 2
    end_of_line = lf
    insert_final_newline = true
    trim_trailing_whitespace = true
    

    相关文章

      网友评论

        本文标题:在vscode内使用eslint和prettier格式化vue,

        本文链接:https://www.haomeiwen.com/subject/jchznctx.html