vscode工具vue開發環境
阿新 • • 發佈:2021-01-19
安裝外掛
ESLint,Vetur,Prettier-Code fromatter
{ "editor.detectIndentation": false, "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", // 這個是控制字型樣式的 "editor.fontSize": 13, "editor.tabSize": 2, // 重新設定tabsize "editor.tabCompletion": "on", // 儲存時自動格式化的,並且以4格縮排 "editor.wordWrapColumn": 200, "editor.wordWrap": "bounded", // 控制折行方式。可以選擇: - “off” (禁用折行), - “on” (視區折行), - “wordWrapColumn”(在“editor.wordWrapColumn”處折行)或 - “bounded”(在視區與“editor.wordWrapColumn”兩者的較小者處折行)。 "editor.formatOnSave": false, // #每次儲存的時候自動格式化 "editor.suggest.snippetsPreventQuickSuggestions": true, //自動補全的 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // #每次儲存的時候將程式碼按eslint格式進行修復,vscode es6語法檢測配置 "editor.mouseWheelZoom": true, "editor.suggestSelection": "first", "editor.formatOnType": true, "editor.quickSuggestions": { "other": true, "comments": true, "strings": true }, "explorer.confirmDelete": true, // 自動補全 "explorer.confirmDragAndDrop": false, // "eslint.autoFixOnSave": true,on "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #讓函式(名)和後面的括號之間加個空格 "typescript.format.insertSpaceAfterSemicolonInForStatements": false, "workbench.sideBar.location": "left", "workbench.editorAssociations": [], "workbench.colorTheme": "Monokai", // 使能每一種語言預設格式化規則 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "[json]": { "editor.defaultFormatter":"vscode.json-language-features" }, "git.confirmSync": false, // *** 這個是提示空格的點點 "launch": {}, "terminal.integrated.env.osx": {}, "files.autoSave": "off", "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/dist": true }, "emmet.includeLanguages": { "vue-html": "html", "vue": "html", "javascript": "javascriptreact", "wxml": "html" }, "files.exclude": { "**/.classpath": true, "**/.project": true, "**/.settings": true, "**/.factorypath": true }, /* eslint的配置 */ "eslint.validate": [ "javascript", "javascriptreact" ], "eslint.options": { "extensions": [".js", ".vue"] }, /* vetur的配置 */ "vetur.completion.autoImport": true, "vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatter.pug": "prettier", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.postcss": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.less": "prettier", "vetur.format.defaultFormatter.stylus": "stylus-supremacy", "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatter.ts": "prettier", "vetur.format.defaultFormatter.sass": "sass-formatter", /* prettier的配置 */ "prettier.printWidth": 160, // 超過最大值換行 "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.disableLanguages": ["vue"], // 不格式化vue檔案,vue檔案的格式化單獨設定 "prettier.endOfLine": "auto", // 結尾是 \n \r \n\r auto "prettier.htmlWhitespaceSensitivity": "ignore", "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的檔案填寫在專案的.prettierignore檔案中 "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否單獨放一行 "prettier.jsxSingleQuote": true, // 在jsx中使用單引號代替雙引號 "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier "prettier.trailingComma": "es5", // 在物件或陣列最後一個元素後面是否加逗號(在ES5中加尾逗號) }