vs code使用

時間 2019-12-14

標籤 code 使用简体版

原文原文鏈接

vs code使用javascript

一.下載及安裝：css

1.下載：https://code.visualstudio.com/html

2.安裝：下一步便可前端

二.插件安裝：vue

參考：https://blog.csdn.net/shenxianhui1995/article/details/81604818（此連接中插件帶有效果圖，若是此連接失效，則參考以下我的整理的插件）java

參考：http://www.javashuo.com/article/p-hrltbzwa-y.html vs code 打造溫馨的vue開發環境node

vetur、Prettier - Code formatter和ESLint 必裝webpack

1.Chinese 語言包，這應該是你們的最愛（我的推薦）git

2.Auto Close Tag 自動關閉標籤（我的推薦）es6

3.Auto Rename Tag 自動重命名標籤（我的推薦）

4.Beautify 格式化

5.Bracket Pair Colorizer 顏色識別括號

6.change-case 雖然 VSCode 內置了開箱即用的文本轉換選項，但其只能進行文本大小寫的轉換。而此插件則添加了用於修改文本的更多命名格式，包括駝峯命名、下劃線分隔命名，snake_case 命名以及 CONST_CAS 命名等

7.Color Info 使用此插件，你能夠追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇「 Go to Definition 和 Peek definition 」選項，它便會給你發送樣式設置的 CSS 代碼

8.Debugger for Chrome 前端調試

9.ESLint EsLint能夠幫助咱們檢查Javascript編程時的語法錯誤。好比：在Javascript應用中，你很難找到你漏泄的變量或者方法。EsLint可以幫助咱們分析JS代碼，找到bug並確保必定程度的JS語法書寫的正確性

10.filesize 在底部狀態欄顯示當前文件大小，點擊後還能夠看到詳細建立、修改時間

11.GitLens — Git supercharged 顯示文件最近的 commit 和做者，顯示當前行 commit 信息

12.HTML Boilerplate 經過使用 HTML 模版插件，你就擺脫了爲 HTML 新文件從新編寫頭部和正文標籤的苦惱。你只需在空文件中輸入 html，並按 Tab 鍵，便可生成乾淨的文檔結構

13.HTMLHint HTML 代碼格式檢測

14.HTML Snippets 代碼自動填充（我的推薦）

15.htmltagwrap 在選中HTML標籤中外面套一層標籤」Alt + W」 (「Option + W」 for Mac) （我的推薦）

16.Image Preview 鼠標移到路徑裏顯示圖像預覽

17.Indenticator 突出目前的縮進深度

18.intelliSense for CSS class names in HTML 把項目中 css 文件裏的名稱智能提示在 html 中

19.JavaScript (ES6) code snippets es6代碼片斷（我的推薦）

20.Live Server 瀏覽器實時刷新

21.Node.js Modules Intellisense require 時的包提示

22.Path Intellisense 路徑自動補全

23.Quokka.js Quokka 是一個調試工具插件，可以根據你正在編寫的代碼提供實時反饋，使用方法: ctrl+shift+p 輸入 quokka 選擇 new javascript 就能夠了

24.Regex Previewer 這是一個用於實時測試正則表達式的實用工具。它能夠將正則表達式模式應用在任何打開的文件上，並高亮全部的匹配項

25.SVG Viewer Vue 語法高亮顯示, 語法錯誤檢查, 代碼自動補全(配合 ESLint 插件效果更佳) （我的推薦）

26.vscode-fileheader 頂部註釋模板，可定義做者、時間等信息，並會自動更新最後修改時間快捷鍵: Ctrl+Alt+i(默認信息可在文件→首選項→設置中修改)

三.新建或打開項目：

新建文件通常不經常使用，都是經過在項目中右鍵新建的

經常使用的是打開文件夾功能

通常方式是在文件資源管理器中建立個文件夾，而後在vs code中打開文件夾便可

四.調試：

1.安裝插件：Debugger for Chrome

2.配置Debugger for Chrome插件：

ctrl+shift+d打切換到調試窗口，最上面有下拉菜單-點擊添加配置，自動生成lauch.json文件，默認不用改

3.終端-新建終端

npm run dev

4.設斷點調試

五.新項目中設置代碼自動格式化：

參考：https://www.haorooms.com/post/vscode_eslint

1.新項目：

經過webpack安裝的時候選擇安裝eslint便可，會在項目中生成.eslintrc.js相似的文件生成

2.設置規則：

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential', 
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

3.設置保存時，自動格式化：
文件 > 首選項 > 設置打開 VSCode 配置文件即settings.json配置以下代碼

{
    // 是否容許自定義的snippet片斷提示
    "editor.snippetSuggestions"      : "top",
    "editor.fontSize"                : 20,
    "editor.fontWeight"              : "400",
    "editor.formatOnType"            : true,
    "workbench.iconTheme"            : "material-icon-theme",
    "workbench.colorTheme"           : "One Dark Pro",
    "guides.enabled": false,
    "editor.tabSize": 2,
    "git.confirmSync": false,
    "window.zoomLevel": 0,
    "editor.renderWhitespace": "boundary",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": true,
    "editor.minimap.renderCharacters": false,
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    "editor.codeLens": true,
    // 配置文件關聯，以便啓用對應的提示
    "files.associations": {
      "*.vue": "vue",
      "*.wxss": "css"
    },
    // 配置emmet是否啓用tab展開縮寫
    "emmet.triggerExpansionOnTab": true,
    // 配置emmet對文件類型的支持
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    // 是否開啓eslint檢測
    "eslint.enable": true,
    // 文件保存時是否根據eslint進行格式化
    "eslint.autoFixOnSave": true,
    // eslint配置文件
    "eslint.options": {
      "extensions": [
          ".js",
          ".vue"
      ]
    },
    // eslint可以識別的文件後綴類型
    "eslint.validate": [
        "javascript",{
            "language": "vue",
            "autoFix": true
        },"html",
        "vue"
    ],
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    // 格式化快捷鍵（默認）：Shift+Alt+F
    // prettier進行格式化時，開啓eslint支持
    // "prettier.eslintIntegration": true,
    // 是否使用單引號
    "prettier.singleQuote": true,
}

4.安裝插件：

ESLint 安裝這個插件便可

六.老項目中設置代碼自動格式化：（比較麻煩，因此在建立項目的時候建議就使用eslint規則）

前提你在package.json中安裝了eslint的依賴，否則配置無用，意思就是必須安裝eslint相關的包

在下面代碼中搜索：eslint

把相關的eslint包引用都拷貝到本身的項目中

而後使用：

npm install

去更新依賴包

{
  "name": "ads",
  "version": "1.0.0",
  "description": "廣告模塊",
  "author": "zhanglp",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

1.在咱們項目根目錄添加.eslintrc.js 文件

2.設置規則：

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential', 
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

3.安裝插件：

ESLint 安裝這個插件便可

4.3.設置保存時，自動格式化：

文件 > 首選項 > 設置打開 VSCode 配置文件即settings.json配置以下代碼

 
  { 
 
      // 是否容許自定義的snippet片斷提示 
 
      "editor.snippetSuggestions"      : "top", 
 
      "editor.fontSize"                : 20, 
 
      "editor.fontWeight"              : "400", 
 
      "editor.formatOnType"            : true, 
 
      "workbench.iconTheme"            : "material-icon-theme", 
 
      "workbench.colorTheme"           : "One Dark Pro", 
 
      "guides.enabled": false, 
 
      "editor.tabSize": 2, 
 
      "git.confirmSync": false, 
 
      "window.zoomLevel": 0, 
 
      "editor.renderWhitespace": "boundary", 
 
      "editor.cursorBlinking": "smooth", 
 
      "editor.minimap.enabled": true, 
 
      "editor.minimap.renderCharacters": false, 
 
      "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", 
 
      "editor.codeLens": true, 
 
      // 配置文件關聯，以便啓用對應的提示 
 
      "files.associations": { 
 
        "*.vue": "vue", 
 
        "*.wxss": "css" 
 
      }, 
 
      // 配置emmet是否啓用tab展開縮寫 
 
      "emmet.triggerExpansionOnTab": true, 
 
      // 配置emmet對文件類型的支持 
 
      "emmet.syntaxProfiles": { 
 
          "javascript": "jsx", 
 
          "vue": "html", 
 
          "vue-html": "html" 
 
      }, 
 
      // 是否開啓eslint檢測 
 
      "eslint.enable": true, 
 
      // 文件保存時是否根據eslint進行格式化 
 
      "eslint.autoFixOnSave": true, 
 
      // eslint配置文件 
 
      "eslint.options": { 
 
        "extensions": [ 
 
            ".js", 
 
            ".vue" 
 
        ] 
 
      }, 
 
      // eslint可以識別的文件後綴類型 
 
      "eslint.validate": [ 
 
          "javascript",{ 
 
              "language": "vue", 
 
              "autoFix": true 
 
          },"html", 
 
          "vue" 
 
      ], 
 
      "search.exclude": { 
 
          "**/node_modules": true, 
 
          "**/bower_components": true, 
 
          "**/dist": true 
 
      }, 
 
      // 格式化快捷鍵（默認）：Shift+Alt+F 
 
      // prettier進行格式化時，開啓eslint支持 
 
      // "prettier.eslintIntegration": true, 
 
      // 是否使用單引號 
 
      "prettier.singleQuote": true, 
 
  }