前端vscode 环境初始化

栏目: JavaScript · 发布时间: 5年前

内容简介:无法格式化有很多种情况,多种因素造成,可能是setting.json 也可能是eslintrc.js 造成。autoFixOnSave 看是否需求自动格式化下面这段代码可解决

无法格式化有很多种情况,多种因素造成,可能是setting.json 也可能是eslintrc.js 造成。

vscode 初始化记录

  • Install ESLint VS Code extension
  • Install Vue 2 Snippts VS Code extension
  • Install eslint-plugin-html: npm install --save-dev eslint-plugin-html eslint-plugin-vue
  • Add "plugins": ["vue","html"] to eslintrc config file as per eslint-plugin-html instructions. Vue extension is enabled by default for the plugin.
  • Open VS Code user settings and add vue to eslint.validate:
"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
],
复制代码
  • Restart VS Code, eslint should now be displaying lint errors within <script> tags

setting.json 文件,按需删减

{
    "workbench.iconTheme": "vscode-icons",
    "window.zoomLevel": 0,
    "editor.renderWhitespace": "all",
    "editor.insertSpaces": true,
    "editor.tabSize": 4,
    "editor.trimAutoWhitespace": false,
    "explorer.confirmDragAndDrop": false,
    "editor.detectIndentation": false,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "vue",
          "autoFix": true
        }
    ],
    "eslint.options": {
        "plugins": ["html","vue"]
    },
    "workbench.editor.enablePreviewFromQuickOpen": false,
    "explorer.confirmDelete": false,
    "editor.wordWrap": "on",
    "workbench.sideBar.location": "left",
    "extensions.ignoreRecommendations": true,
    "debug.inlineValues": true,
    "window.menuBarVisibility": "visible",
    "workbench.editor.enablePreview": false,
    "breadcrumbs.enabled": true,
    "workbench.statusBar.feedback.visible": false,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "files.eol": "\r\n",
    "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
    "vetur.format.defaultFormatter.html": "none",
    "vetur.format.defaultFormatter.js": "none",
    "eslint.autoFixOnSave": true,
    "eslint.alwaysShowStatus": true,
    "eslint.enable": true,
    "files.autoSave": "off",
}

复制代码

autoFixOnSave 看是否需求自动格式化

eslintrc.js 按需复制

// http://eslint.org/docs/user-guide/configuring

module.exports = {
    root: true,
    // parser: "babel-eslint",
    "parserOptions": {
        "parser": "babel-eslint",
        "ecmaVersion": 2017,
        "sourceType": "module"
    },
    env: {
        browser: true,
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    extends: ["standard", "eslint:recommended", "plugin:vue/essential"],
    // required to lint *.vue files
    plugins: [
        "vue"
    ],
    // add your custom rules here
    "rules": {
        //"off"或 0 -关闭规则
        //"warn" 或 1 - 开启规则, 使用警告 程序不会退出
        //"error"或 2 - 开启规则, 使用错误 程序退出
        "indent": [2, 4],
        //分号
        "eqeqeq": 0,
        "no-useless-escape": 0,
        "brace-style": 0,//大括号风格
        "curly": [2, "all"], //[2, "all"],//必须使用 if(){} 中的{}
        "no-new": 0,
        "no-return-assign": "warn",//return 语句中不能有赋值表达式

        "handle-callback-err": 0,
        "padded-blocks": 0,
        "no-duplicate-imports": 0,
        "operator-linebreak": 0,
        "no-extend-native": 0,
        "no-sequences": 0,

        "no-debugger": 0,
        "no-eval": 0,
        "comma-dangle": [2, "never"],
        "arrow-spacing": [2, { "before": true, "after": true }],
        "no-undef": 2,
        "no-console": 0,
        "space-before-function-paren": [2, "always"],
        "keyword-spacing": [2, { "before": true, "after": true }],
        "space-before-blocks": [2, "always"],
        "spaced-comment": [2, "always", {"exceptions": ['-', '+']}],
        "quotes": [2, "double"],
        "semi": [2, "never"],
        "no-multiple-empty-lines": [2, {"max": 1}],
        "generator-star-spacing": [2, { "before": true, "after": true }],
        "object-curly-newline": ["error", { "consistent": true, "minProperties": 2 }],
        "object-curly-spacing": [2, "always"],
        "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
        "linebreak-style": [2, "windows"],
		"eol-last": [2, "windows"],
        "object-property-newline": [2, {}],
        "space-infix-ops": 2,
        "vue/html-indent": [2, 4, {
            "attribute": 1,
            "baseIndent": 1,
            "closeBracket": 0,
            "alignAttributesVertically": true,
            "ignores": []
        }],
        "no-control-regex": 0
    },
    globals: {
        "_": true,
        "arguments": true,
        "ActiveXObject": true,
        "AndroidLogin": true
    }
}


复制代码

下面这段代码可解决 template 无法格式化情况。 有些无语的可删除,按现有公司的规范来

"vue/html-indent": [2, 4, {
            "attribute": 1,
            "baseIndent": 1,
            "closeBracket": 0,
            "alignAttributesVertically": true,
            "ignores": []
        }],
复制代码

常用插件

  • Auto Rename Tag
  • ESlint
  • filesize
  • Git History
  • Vetur
  • vscode-icons
  • Vue 2 Snippets
  • Quick Task

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTML Dog

HTML Dog

Patrick Griffiths / New Riders Press / 2006-11-22 / USD 49.99

For readers who want to design Web pages that load quickly, are easy to update, accessible to all, work on all browsers and can be quickly adapted to different media, this comprehensive guide represen......一起来看看 《HTML Dog》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

MD5 加密
MD5 加密

MD5 加密工具