vscode我就很少做介紹了,都9102年了,做爲一個前端開發攻城獅,還不知道vscode有點過度了哈。下面直接進入主題:javascript
配置同步,一切皆可同步。多臺電腦使用vscode時,可將它們的配置同步,包括代碼片斷,總之很是強大,裝就是了。php
本人一直在用的一款主題,內涵三種顏色,固然,審美這個東西,仁者見仁,不喜歡這個也可試試排名第一的One Dark Pro。css
適用於 VS Code 的中文(簡體)語言包,如今vscode將語言包獨立出來了,這樣就能夠安裝不一樣語言包輕鬆適配各類語言了。html
看名字就知道是用來運行代碼的,能夠支持不少種語言,安裝之後右上角有個三角形的圖標,點擊一下就能夠運行當前編輯的文件。前端
其實就是一些代碼片斷,方便快捷輸入,支持ts、tsx、js、jsx文件,以前用過JavaScript (ES6) code snippets,後來發現這個內容更多,因此換成這個了。vue
這個應該不用我多說了,代碼檢查、自動修復,如今TS也中止TSLint而轉投ESLint了,更增強大了。java
強大的git插件,不少便利性的功能,用git的必裝插件。 node
會掃描項目中或指定的css文件,而後在你寫html、vue或者其餘支持的語言的時候給與提示,還有個IntelliSense for CSS class names in HTML插件,也是相似功能,裝一個就能夠了,不過彷佛HTML CSS Support更快一點。react
使用jquery的同窗能夠安裝下這個,輸入jq就會出現對應的語法提示。jquery
文件頭部信息生成用的,能夠自定義配置。
使用sass的能夠試試,固然若是你的開發都是使用構建工具,那就不用安裝個了。 安裝好後,點擊右下角
爲靜態和動態頁面啓動具備動態從新加載功能的本地開發服務器,點擊右下角的
微信小程序標籤、屬性的智能補全(同時支持原生小程序、mpvue 和 wepy 框架,並提供 snippets),若是使用vscode開發小程序,那麼這個插件應該是最好的。
資源路徑自動補全,其實vscode已經內置了此功能,這個插件算是一個補充吧,更強大一點。
很是流行的代碼格式化工具,能夠和eslint完沒結合,相似的插件還有Beautify,安裝其中一個就好。
能夠保存多個項目,能夠很是方便在多個項目間切換。
開發vue必備,支持vue代碼高亮、語法提示、格式化。
微軟爸爸官方出品的AI輔助開發工具,話說是基於 GitHub 上的數千個開源項目進行分析,給與你最適合的智能提示,感受很強大的樣子。
文件(夾)圖標,什麼文件一目瞭然。
基於最新的 Vue 2 的 API 代碼片斷。
最後貼上一份vscode配置:
// 將設置放入此文件中以覆蓋默認設置
{
// 編輯器
"editor.find.autoFindInSelection": true,
"editor.formatOnType": true,
"editor.lineHeight": 24,
"editor.renderWhitespace": "selection",
"editor.renderControlCharacters": false,
"editor.multiCursorModifier": "ctrlCmd",
"editor.tabSize": 2,
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"editor.renderLineHighlight": "all",
"editor.showFoldingControls": "always",
"editor.smoothScrolling": true,
"editor.snippetSuggestions": "top",
"editor.wordWrap": "on",
"editor.wordWrapColumn": 100,
"editor.suggestSelection": "first",
"editor.maxTokenizationLineLength": 50000,
"workbench.startupEditor": "none",
"workbench.settings.editor": "json",
"workbench.settings.openDefaultSettings": true,
"workbench.settings.useSplitJSON": true,
"workbench.colorTheme": "Ayu Mirage Bordered",
"workbench.iconTheme": "vscode-icons",
//窗口
"window.title": "${dirty}${activeEditorShort}${separator}${activeEditorMedium}${separator}${appName}",
"window.titleBarStyle": "custom",
//文件
"files.associations": {
"*.wxml": "wxml",
"*.wxss": "css",
"*.cjson": "jsonc",
"*.wxs": "javascript",
"*.art": "vue-html",
"*.ftl": "html",
"*.pug": "jade"
},
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/panos": true
},
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/*/**": true,
"**/panos/*/**": true
},
// 文件資源管理器
"explorer.autoReveal": false,
"explorer.openEditors.visible": 0,
// 搜索
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/panos": true,
"**/dist": true
},
"search.followSymlinks": false,
//PHP
"php.validate.executablePath": "D:/development/phpEnv/php/php-72/php.exe",
// css
"css.lint.duplicateProperties": "warning",
"css.lint.zeroUnits": "warning",
// less
"less.lint.duplicateProperties": "warning",
"less.lint.zeroUnits": "warning",
// scss
"scss.lint.duplicateProperties": "warning",
"scss.lint.zeroUnits": "warning",
// 擴展
"extensions.ignoreRecommendations": true,
"extensions.showRecommendationsOnlyOnDemand": true,
// 終端
"terminal.integrated.shell.windows": "C:\\Program Files\\PowerShell\\7-preview\\pwsh.exe",
//集成終端
// "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
// 問題預覽
"problems.decorations.enabled": false,
// 導航路徑
"breadcrumbs.filePath": "last",
//Emmet
"emmet.excludeLanguages": [
"markdown",
"php",
// "javascript",
// "javascriptreact",
"json",
"jsonc"
],
"emmet.includeLanguages": {
"vue": "html",
"vue-html": "html",
"wxml": "html"
},
"emmet.syntaxProfiles": {
"vue": [
"html",
"css",
"less"
],
"xml": "html"
},
"emmet.triggerExpansionOnTab": true,
//prettier
"prettier.printWidth": 100,
"prettier.semi": true,
"prettier.singleQuote": true,
// PHP interlliSense
// "php.executablePath": "D:/development/phpEnv/php/php-73/php.exe",
//code run
"code-runner.showRunCommandInEditorContextMenu": false,
"code-runner.defaultLanguage": "javascript",
// php-cs-fixer
// "php-cs-fixer.executablePath": "D:/development/phpEnv/php/php-73/php-cs-fixer-v2.phar",
// "php-cs-fixer.executablePathWindows": "D:/development/phpEnv/php/php-73/php-cs-fixer-v2.phar",
// "php-cs-fixer.onsave": true,
//fileheader
"fileheader.customMade": {
"Author": "", //你本身的名字
"Github": "", //你本身的地址
"Date":"Do not edit",
"LastEditors":"",
"LastEditTime":"Do not edit"
},
"fileheader.configObj": {
"autoAdd": false,
"prohibitAutoAdd": [
"json",
"html",
"vue"
]
},
//path-intellisense
"path-intellisense.extensionOnImport": true,
//gitlens
"gitlens.codeLens.enabled": false,
"gitlens.views.repositories.location": "scm",
"gitlens.views.lineHistory.location": "scm",
"gitlens.views.fileHistory.enabled": false,
"gitlens.views.lineHistory.enabled": false,
"gitlens.views.search.location": "scm",
"gitlens.views.compare.enabled": false,
"gitlens.menus": {
"editor": {
"blame": false,
"clipboard": false,
"compare": false,
"details": false,
"history": false,
"remote": false
},
"editorGroup": {
"blame": true,
"compare": true,
"history": true,
"remote": true
},
"editorTab": {
"compare": false,
"history": false,
"remote": false
},
"explorer": {
"compare": false,
"history": false,
"remote": false
}
},
//vutur
"vetur.validation.template": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
"prettyhtml": {
"printWidth": 300,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": true,
"semi": true
}
},
// git
"git.path": "D:/Program Files/Git/bin/git.exe",
"git.enableSmartCommit": true,
//同步 sync-setting
"sync.gist": "", //你本身的gist
"sync.quietSync": false,
"sync.removeExtensions": true,
"sync.syncExtensions": true,
"sync.autoDownload": false,
"sync.autoUpload": false,
"sync.forceDownload": false,
"sync.forceUpload": true,
//vsicons
// liveServer
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.port": 0,
// minapp
"minapp-vscode.disableAutoConfig": true,
//css settings
"css.fileExtensions": [
"css",
"scss",
"less"
],
//ESlint
"eslint.options": {
"root":true,
// "parser": "@typescript-eslint/parser",
"plugins": [
// "prettier",
// "@typescript-eslint"
],
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended",
"plugin:vue/essential",
],
"rules": {
"camelcase": 1,
"curly": 0,
"brace-style": [ 0, "1tbs" ],
"quotes": [ 1, "single" ],
"semi": [ 1, "always" ],
"space-infix-ops": 1,
"no-useless-escape": 1,
"one-var": 0,
"no-extend-native": 1,
"no-unused-vars": 1,
"eqeqeq": 1,
"object-curly-spacing":[1,"always"],
"standard/object-curly-even-spacing": 0,
"func-call-spacing": 1,
"no-unneeded-ternary": 1,
"operator-assignment": 1,
"arrow-spacing": 1,
"space-before-function-paren": 0,
"no-var": 0,
"object-shorthand": 0,
"x-invalid-end-tag": 0,
"comma-dangle": 1,
"space-before-blocks": 1,
"key-spacing": 1,
"no-irregular-whitespace": 1,
"vue/valid-v-for": 0,
"prettier/prettier": [0, {
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": true,
"key-spacing": false
}],
},
"exclude": [
"/node_modules/*/**",
"/ignore_lib/*/**"
],
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 2019,
"sourceType": "module",
"ecmaFeatures":{
"jsx": true
}
}
},
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},{
"language": "typescriptreact",
"autoFix": true
}
],
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.showOutputWindow": false,
"liveSassCompile.settings.formats": [{
"format": "compressed",
"extensionName": ".css",
"savePath": "~/../css/"
}],
"liveSassCompile.settings.autoprefix": [
"> 1%",
"not ie <= 8",
"last 2 versions"
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**",
"**/doc/**",
"**/bower/**",
"**/*.scss"
],
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"vsicons.dontShowNewVersionMessage": true,
"javascript.implicitProjectConfig.experimentalDecorators": true
}
複製代碼