1. 程式人生 > 實用技巧 >vscode工具vue開發環境

vscode工具vue開發環境

安裝外掛

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中加尾逗號)
}