一、插件:
eslint ,
vetur ,
chinese ,
open in browser,
prettier -Code fomatter(下載這個時,不要下載最多的那個,要下載第二多的那個,下載量最多的那個有坑)
二、最新一版的vscode的配置,根據項目需要配置的:
{ // vscode默認啟用了根據文件類型自動設置tabsize的選項 "editor.detectIndentation": false, // 重新設定tabsize "editor.tabSize": 2, // #每次保存的時候自動格式化 "editor.formatOnSave": true, // #每次保存的時候將代碼按eslint格式進行修復,vscode es6語法檢測配置 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // "eslint.autoFixOnSave": true, "explorer.confirmDragAndDrop": false, // #讓函數(名)和后面的括號之間加個空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #這個按用戶自身習慣選擇 "vetur.format.defaultFormatter.html": "js-beautify-html", // #讓vue中的js按編輯器自帶的ts格式進行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", // // 使能每一種語言默認格式化規則 // "[html]": { // "editor.defaultFormatter": "esbenp.prettier-vscode" // }, // "[css]": { // "editor.defaultFormatter": "esbenp.prettier-vscode" // }, // "[less]": { // "editor.defaultFormatter": "esbenp.prettier-vscode" // }, // "[javascript]": { // "editor.defaultFormatter": "esbenp.prettier-vscode" // }, /* prettier的配置 */ // "prettier.printWidth": 100, // 超過最大值換行 "prettier.tabWidth": 2, // 縮進字節數 "prettier.useTabs": false, // false縮進不使用tab,使用空格 "prettier.semi": true, // true句尾添加分號 "prettier.singleQuote": true, // true使用單引號代替雙引號 "prettier.proseWrap": "preserve", // 默認值。因為使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本樣式進行折行 "prettier.arrowParens": "avoid", // (x) => {} 箭頭函數參數只有一個時是否要有小括號。avoid:省略括號 "prettier.bracketSpacing": true, // 在對象,數組括號與文字之間加空格 "{ foo: bar }" "prettier.endOfLine": "auto", // 結尾是 \n \r \n\r auto "prettier.eslintIntegration": false, //不讓prettier使用eslint的代碼格式進行校驗 "prettier.htmlWhitespaceSensitivity": "ignore", "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項目的.prettierignore文件中 "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否單獨放一行 "prettier.jsxSingleQuote": false, // 在jsx中使用單引號代替雙引號 "prettier.parser": "babylon", // 格式化的解析器,默認是babylon "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier "prettier.stylelintIntegration": false, //不讓prettier使用stylelint的代碼格式進行校驗 "prettier.trailingComma": "es5", // 在對象或數組最后一個元素后面是否加逗號(在ES5中加尾逗號) "prettier.tslintIntegration": false, // 不讓prettier使用tslint的代碼格式進行校驗 // ===========以下4個是控制保存時自動格式化的,並且以4格縮進================ "editor.tabCompletion": "on", // ===========以下是根據自己需求配置的============================ "editor.suggest.snippetsPreventQuickSuggestions": true, //自動補全的 "explorer.confirmDelete": true, // 自動補全 "[json]": {}, "workbench.sideBar.location": "left", "editor.wordWrap": "on", // 控制折行方式。可以選擇: - “off” (禁用折行), - “on” (視區折行), - “wordWrapColumn”(在“editor.wordWrapColumn”處折行)或 - “bounded”(在視區與“editor.wordWrapColumn”兩者的較小者處折行)。 "editor.fontSize": 17, // 兩個選擇器中是否換行 "editor.formatOnType": true, "editor.parameterHints": true, "editor.quickSuggestions": { "other": true, "comments": true, "strings": true }, "git.confirmSync": true, // *** 這個是提示空格的點點 "typescript.format.insertSpaceAfterSemicolonInForStatements": false, "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/dist": true }, "emmet.includeLanguages": { "vue-html": "html", "vue": "html", "javascript": "javascriptreact", "wxml": "html" }, "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", // 這個是控制字體樣式的 "auto-close-tag.activationOnLanguage": [ "xml", "php", "blade", "ejs", "jinja", "javascript", "javascriptreact", "typescript", "typescriptreact", "plaintext", "markdown", "vue", "liquid", "erb", "lang-cfml", "cfml", "HTML (Eex)" ], "eslint.options": { "extensions": [ ".js", ".vue" ] }, "editor.mouseWheelZoom": true, "editor.suggestSelection": "first", "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", "files.exclude": { "**/.classpath": true, "**/.project": true, "**/.settings": true, "**/.factorypath": true }, "launch": {}, "workbench.editorAssociations": {}, "workbench.colorTheme": "Monokai", "terminal.integrated.env.osx": {}, "files.autoSave": "off" }