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

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

查看所有标签

猜你喜欢:

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

SQL必知必会

SQL必知必会

福达 (Ben Forta) / 钟鸣、刘晓霞 / 人民邮电出版社 / 2013-5-1 / 29.00元

SQL语法简洁,使用方式灵活,功能强大,已经成为当今程序员不可或缺的技能。 本书是深受世界各地读者欢迎的SQL经典畅销书,内容丰富,文字简洁明快,针对Oracle、SQL Server、MySQL、DB2、PostgreSQL、SQLite等各种主流数据库提供了大量简明的实例。与其他同类图书不同,它没有过多阐述数据库基础理论,而是专门针对一线软件开发人员,直接从SQL SELECT开始,讲述......一起来看看 《SQL必知必会》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

SHA 加密
SHA 加密

SHA 加密工具

html转js在线工具
html转js在线工具

html转js在线工具