2018 vscode 前端最佳配置，2018vscode

来源： javaer 分享于 2019-08-10 点击 38725 次点评：111

2018 vscode 前端最佳配置，2018vscode

vscode最佳配置

最近一次更新时间： 2018.12.20 （vscode V1.30.1）

配置说明详解

vscode配置内容在最后，已附上。可直接copy使用

editor是针对vscode的风格设置
例如 tabSize：一个tab等于2个空格，行高为24px

workbench是针对vscode的主题设置
例如 iconTheme（图标风格）：使用插件 vscode-great-icons （需搜索安装）
例如 colorTheme（代码颜色风格）：使用插件One Dark Pro Vivid（需搜索安装）

search.exclude 配置vscode中在项目中的哪些地方被排除搜索,避免你每次搜索结果中都有一大队无关内容

files.associations 配置文件关联，比如 :

任何 vue 后缀的文件会被认为是 html 文件，(查看编辑器右下角可见) 然后 vscode 会用 html 规则匹配 vue 文件做相应格式化，代码提示。
任何 wxss 后缀的文件会被认为是 css 文件，然后 vscode 会用 css 规则匹配 wxss 文件，给出加载对应的 css 的属性排序，rem 自动转换，格式化等规则

	 "files.associations": {
	        "*.vue": "html",
	        "*.wxss": "css"
	  }

sync是用于同步vscode配置使用，不用每一次换个电脑都要复制一次配置，避免丢失或者改动，保持一致！

apicloud 是用于同步vscode开发apicloud程序时进行手机wifi真机同步使用，不用数据线。

vetur 和prettier和stylus是用于vue开发时的代码格式化, 代码提示.

eslint 是用于代码格式化代码时，选择用自己的格式化规则或者标准规则，prettier规则等

launch是用于启动一个本地服务器，可以直接加载你的html文件

Sublime Text Keymap很多FD习惯使用sublime的一套快捷键。

vscode插件安装

Atom One Dark Theme 主题
VSCode Great Icons 图标主题
Beautify 美化vscode代码
Bracket Pair Colorizer 每一对括号用不同颜色区别（括号强迫症必备）
cssrem 将css中的px自动转换为rem.再也不用计算器了（大漠大神推介）
Code Runner node，python等代码不必开命令行即可运行
Eslint 语法检测
Git History git提交历史
GitLens 在代码中显示每一行代码的提交历史
**HTML CSS Support ** vscode对html，css文件支持，便于你快速书写属性
Path Intellisense 路径识别苦战，比如书写图片路径时。遗憾就是，对webpack项目中的路径别名无法扩展
Prettier 格式化，使用标准风格，快捷键 alt+shift +F
Python 添加对.py文件的支持，毕竟tab与空格的痛苦写过python的都知道
React Native Tools 添加对 React Native项目的支持，快速书写es6以及jsx
C/C++ 运行React Native项目时，有些文件的查看需要这个
Settings Sync 用于同步vscode配置，多台电脑一份配置（相对而言配置复杂，可不安装）
Sublime Text Keymap 启动sublimeText的快捷键配置。vscode上面自有一套快捷键设定，个人习惯sublime快捷键
Vetur 添加对.vue后缀文件的快速书写支持。
Vue 2 Snippets 快速新建vue页面（参考我另一篇文章）
markdownlint 书写md文件的预览插件
language-stylus CSS预处理器styl后缀文件的识别扩展
View In Browser 迅速通过浏览器打开html文件

{ // VScode主题配置
    "editor.tabSize": 2,
    "editor.lineHeight": 24,
    "editor.renderLineHighlight": "none",
    "editor.renderWhitespace": "none",
    "editor.fontFamily": "Consolas",
    "editor.fontSize": 15,
    "editor.cursorBlinking": "smooth",
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnSave": false,
    "editor.snippetSuggestions": "top",
    "editor.wordWrapColumn": 200,
    "editor.wordWrap": "off",
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": false
    },
    // 保存时自动格式化
    "editor.formatOnPaste": false,
    "files.trimTrailingWhitespace": true,
    "terminal.integrated.shell.windows": "C:\\windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
    "typescript.suggest.autoImports": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "javascript.suggest.autoImports": true,
    "workbench.iconTheme": "eq-material-theme-icons",
    "workbench.startupEditor": "newUntitledFile",
    "workbench.colorTheme": "Material Theme High Contrast",
    "workbench.colorCustomizations": {
        // 设置guide线高亮颜色
        "editorIndentGuide.activeBackground": "#ff0000"
    },
    // 启用/禁用导航路径
    "breadcrumbs.enabled": true,
    // git是否启用自动拉取
    "git.autofetch": true,
    "minapp-vscode.disableAutoConfig": true,
    "view-in-browser.customBrowser": "chrome",
    // VScode 文件搜索区域配置
    "search.exclude": {
        "**/dist": true,
        "**/build": true,
        "**/elehukouben": true,
        "**/.git": true,
        "**/.gitignore": true,
        "**/.svn": true,
        "**/.DS_Store": true,
        "**/.idea": true,
        "**/.vscode": false,
        "**/yarn.lock": true,
        "**/tmp": true
    },
    // 配置文件关联
    "files.associations": {
        "*.vue": "html",
        "*.wxss": "css",
        "*.cjson": "jsonc",
        "*.wxs": "javascript"
    },
    // 配置emmet是否启用tab展开缩写
    "emmet.triggerExpansionOnTab": true,
    // 配置emmet对文件类型的支持
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html",
        "javascript": "javascriptreact",
        "xml": {
            "attr_quotes": "single"
        }
    },
    // 在react的jsx中添加对emmet的支持
    "emmet.includeLanguages": {
        "jsx-sublime-babel-tags": "javascriptreact",
        "wxml": "html"
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "wrap_attributes": "force-aligned"
    },
    // 是否开启eslint检测
    "eslint.enable": false,
    // 文件保存时，是否自动根据eslint进行格式化
    "eslint.autoFixOnSave": false,
    // eslint配置文件
    "eslint.options": {
        "configFile": "E:/aaaworkspace/ex/experience/.eslintrc.js",
        "plugins": [
            "html",
            "vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        "typescript",
        "typescriptreact"
    ],
    // 格式化快捷键 shirt+alt+F
    // prettier进行格式化时是否安装eslint配置去执行，建议false
    "prettier.eslintIntegration": false,
    // 如果为true，将使用单引号而不是双引号
    "prettier.singleQuote": true,
    // 代码换行,每一行最大占有字符数
    "prettier.printWidth": 200,
    // 配置gitlen中git提交历史记录的信息显示情况
    "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": false,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false,
        "suppressResultsExplorerNotice": false,
        "suppressShowKeyBindingsNotice": true,
        "suppressUpdateNotice": true,
        "suppressWelcomeNotice": false
    },
    // 调试，本地服务器配置
    "launch": {
        "configurations": [{
                "type": "node",
                "request": "launch",
                "name": "Node.js",
                "program": "${file}"
            },
            {
                "type": "chrome",
                "request": "launch",
                "name": "vuejs: chrome",
                "url": "http://localhost:8080",
                "webRoot": "${workspaceFolder}/src",
                "breakOnLoad": true,
                "sourceMapPathOverrides": {
                    "webpack:///src/*": "${webRoot}/*"
                }
            }
        ],
        "compounds": []
    },
    // 是否格式化python文件
    "python.linting.enabled": false,
    // 设置端口。开启apicloud在vscode中的wifi真机同步
    "apicloud.port": "23450",
    // 设置apicloud在vscode中的wifi真机同步根目录，默认可不设置
    "apicloud.subdirectories": "/apicloudproject"

}

2018 vscode 前端最佳配置，2018vscode

2018 vscode 前端最佳配置，2018vscode

vscode最佳配置

配置说明详解

vscode插件安装

相关文章

相关文章

用户点评