前端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

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

查看所有标签

猜你喜欢:

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

UML基础与Rose建模教程

UML基础与Rose建模教程

人民邮电出版社 / 人民邮电出版社 / 2006-1 / 36.00元

《UML基础与Rose建模教程》全面,详细地介绍了 UML 的基础知识和Rational Rose的使用方法,并通过4个综合性的案例,展示了使用UML和Rose进行软件建模的具体方法和步骤。全书共分20章,前4章是基础部分,介绍了UML和Rose的基础知识;第5章到第13章是《UML基础与Rose建模教程》的重点,介绍了UML的9种图和组成元素,以及相关的建模技术,并在每章的最后介绍了各种图在Ro......一起来看看 《UML基础与Rose建模教程》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换