vscode的settings.json配置

Posted 遥望那月

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vscode的settings.json配置相关的知识,希望对你有一定的参考价值。

  1 {
  2     "[json]": {},
  3     "workbench.sideBar.location": "right",
  4     "editor.wordWrap": "on", // 控制折行方式。可以选择: - “off” (禁用折行), - “on” (视区折行), - “wordWrapColumn”(在“editor.wordWrapColumn”处折行)或 - “bounded”(在视区与“editor.wordWrapColumn”两者的较小者处折行)。
  5     "editor.fontSize": 17,
  6     "eslint.autoFixOnSave": true,
  7     "editor.codeActionsOnSave": {
  8         "source.fixAll.eslint": true
  9     },
 10     // ===========以下4个是控制保存时自动格式化的,并且以4格缩进================
 11     "editor.tabCompletion": "on",
 12     "editor.detectIndentation": false,
 13     "editor.tabSize": 4, //vscode设置的缩进量
 14     "editor.formatOnSave": true, //保存时候自动格式化
 15     // ===========以下是根据自己需求配置的============================
 16     "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //  #让函数(名)和后面的括号之间加个空格
 17     "git.confirmSync": true, // *** 这个是提示空格的点点
 18     // "stylusSupremacy.insertColons": false, // 是否插入冒号
 19     // "stylusSupremacy.insertSemicolons": false, // 是否插入分好
 20     // "stylusSupremacy.insertBraces": false, // 是否插入大括号
 21     // "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
 22     "php.validate.executablePath": "D:\useful_software\phpstudy\PHPTutorial\php\php-5.5.38\php.exe", // 需要配置 php 可执行文件目录
 23     "eslint.validate": [
 24         "javascript",
 25         "javascriptreact",
 26         {
 27             "language": "typescript",
 28             "autoFix": true
 29         },
 30         {
 31             "language": "typescriptreact",
 32             "autoFix": true
 33         },
 34         {
 35             "language": "vue",
 36             "autoFix": true
 37         },
 38         {
 39             "language": "html",
 40             "autoFix": true
 41         }
 42     ], // 添加 vue 支持
 43     "typescript.format.insertSpaceAfterSemicolonInForStatements": false,
 44     "editor.formatOnType": true // 两个选择器中是否换行
 45     "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
 46     "vetur.format.defaultFormatterOptions": {
 47         "prettier": {
 48             "semi": false
 49         },
 50         "js-beautify-html": {
 51             "wrap_attributes": "auto"
 52             // #vue组件中html代码格式化样式
 53             // - auto: 仅在超出行长度时才对属性进行换行。
 54             // - force: 对除第一个属性外的其他每个属性进行换行。
 55             // - force-aligned: 对除第一个属性外的其他每个属性进行换行,并保持对齐。
 56             // - force-expand-multiline: 对每个属性进行换行。
 57             // - aligned-multiple: 当超出折行长度时,将属性进行垂直对齐。
 58         }
 59     },
 60     "search.exclude": {
 61         "**/node_modules": true,
 62         "**/bower_components": true,
 63         "**/dist": true
 64     },
 65     "emmet.includeLanguages": {
 66         "vue-html": "html",
 67         "vue": "html",
 68         "javascript": "javascriptreact",
 69         "wxml": "html"
 70     },
 71     // "editor.fontFamily": "‘Droid Sans Mono‘, ‘Courier New‘, monospace, ‘Droid Sans Fallback‘", //  这个是控制字体样式的
 72     "files.associations": {
 73         "*.html": "html",
 74         "*.js": "javascriptreact",
 75         "*.vue": "vue",
 76         "*.cjson": "jsonc",
 77         "*.wxss": "css",
 78         "*.wxs": "javascript",
 79         "*.ts": "typescriptreact"
 80     },
 81     "auto-close-tag.activationOnLanguage": [
 82         "xml",
 83         "php",
 84         "blade",
 85         "ejs",
 86         "jinja",
 87         "javascript",
 88         "javascriptreact",
 89         "typescript",
 90         "typescriptreact",
 91         "plaintext",
 92         "markdown",
 93         "vue",
 94         "liquid",
 95         "erb",
 96         "lang-cfml",
 97         "cfml",
 98         "HTML (Eex)"
 99     ],
100     "eslint.options": {
101         "extensions": [
102             ".js",
103             ".vue"
104         ]
105     },
106     // "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
107     // ====================================================================
108     // "fileheader.LastModifiedBy": "Oralinge",
109     // "fileheader.Author": "Oralinge",
110     // "git.autofetch": true,
111     // "[html]": {
112     //     "editor.defaultFormatter": "HookyQR.beautify"
113     // },
114     // "editor.detectIndentation": false,
115     // "editor.formatOnSave": true,
116     // "editor.formatOnPaste": true,
117     // "prettier.eslintIntegration": true,
118     // //  #去掉代码结尾的分号 
119     // "prettier.semi": false,
120     // //  #使用带引号替代双引号 
121     // "prettier.singleQuote": true,
122     // #这个按用户自身习惯选择 
123     // "vetur.format.defaultFormatter.html": "js-beautify-html",
124     // =====================================
125     // "workbench.iconTheme": "vscode-icons",
126     // "emmet.triggerExpansionOnTab": true,
127     // "tslint.autoFixOnSave": true,
128     // "prettier.semi": false, //去掉代码结尾的分号
129     // "prettier.singleQuote": true, // 强制单引号
130     // "vetur.format.defaultFormatterOptions": {
131     //   "js-beautify-html": {
132     //     "wrap_attributes": "force-aligned" // 属性强制折行对齐
133     //   }
134     // },
135     // "javascript.implicitProjectConfig.experimentalDecorators": true,
136     // "[markdown]": {
137     //   "editor.defaultFormatter": "yzhang.markdown-all-in-one"
138     // },
139     // //下面的这些配置一定要留着,很好用
140     // "emmet.syntaxProfiles": {
141     //   "javascript": "jsx",
142     //   "vue": "html",
143     //   "vue-html": "html"
144     // },
145     // // "editor.cursorBlinking": "smooth",
146     // "editor.minimap.enabled": true,
147     // "editor.minimap.renderCharacters": false,
148     // "editor.codeLens": true,
149     // "window.zoomLevel": 0,
150 }

以上是关于vscode的settings.json配置的主要内容,如果未能解决你的问题,请参考以下文章

vscode的settings.json配置

聊聊vscode配置settings.json知其所以然(附大量配置)

VsCode Vue代码及插件配置

vscode的setting.json的配置

VScode配置

vsCode中编写vue项目时,webpack配置的alias别名无效