工程實戰-vue在vscode的環境配置

solocoder 發布于2019-08-21 18:22 / 1186人閱讀

摘要：基礎開發插件圖標美化調試代碼格式化代碼格式化代碼規范語法提示必備及相關技術棧語法提示文件高亮格式化編碼支持自動閉合標簽自動更改對應標簽名自動補全路徑本地項目管理右擊在瀏覽器打開文件支持支持友好化配置基礎設置設置設置設置設置設置配

1. vscode基礎開發插件

vscode-icons 圖標美化
Debugger for Chrome 調試

Beautify 代碼格式化
Prettier 代碼格式化
ESLint 代碼規范
JavaScript (ES6) code snippets javascript語法提示

vetur vue必備
VueHelper vue及相關技術棧語法提示
Sass sass文件高亮&格式化
Stylus language stylus編碼支持

Auto Close Tag 自動閉合標簽
Auto Rename Tag 自動更改對應標簽名
Path Autocomplete 自動補全路徑

Git Lens 本地項目git管理
View in Browser 右擊在瀏覽器打開文件
Markdown All in One markdown支持
Npm npm支持
Npm Intellisense npm友好化

2. 配置vscode settings.json

{
    // 基礎設置
    "editor.tabSize": 2,
    "workbench.iconTheme": "vscode-icons",
    "workbench.startupEditor": "welcomePage",
    "editor.quickSuggestions": {
        "strings": true
    },
    
    // vue設置
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "files.associations": {
        "*.vue": "vue"
    },
    
    // vetur設置
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    
    // eslint設置
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    
    // format設置
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.useTabs": true,
    
    // git設置
    "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": false,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false,
        "suppressUpdateNotice": false,
        "suppressWelcomeNotice": true
    }
}

3. ESLint配置文件

（1）eslint --init 然后選擇自己的代碼風格（當然，上面的配置與選擇項對應修改）
（2）按照cube-ui的代碼風格設定（推薦）
工程中.eslintrc.js文件

module.exports = {
    root: true,
    parser: "babel-eslint",
    parserOptions: {
        sourceType: "module"
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    extends: "standard",
    // required to lint *.vue files
    plugins: [
        "html"
    ],
    // add your custom rules here
    "rules": {
        // allow paren-less arrow functions
        "arrow-parens": 0,
        // allow async-await
        "generator-star-spacing": 0,
        // allow debugger during development
        "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
        "no-tabs": 0,
        "space-before-function-paren": 0
    }
}

點擊查看standard類型配置項
點擊查看ESLint規則說明

GPU云服務器云服務器阿里云服務器配置環境在哪里怎么在云主機上面配置網站環境怎么在阿里云上配置服務器環境環境變量的配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90397.html

記自己一次vue基礎實戰：配置篇

摘要：前言記錄自己從基礎學習實戰，初入發表文章，望各位大佬口下留情不對之處還請大佬指點一下。在加載完后，你自己默認的瀏覽器自動打開配置界面新建項目。 1. 前言記錄自己從基礎學習vue實戰，初入發表文章，望各位大佬口下留情！不對之處還請大佬指點一下。 2. 新建，配置項目 1. 新建Vue-cli3.0腳手架的項目在這里普及一下，什么是Vue-cli？ Vue是一套用于構建用戶界面的漸...

NoraXie 2019-08-02 15:34 評論0 收藏0
記自己一次vue基礎實戰：配置篇

摘要：前言記錄自己從基礎學習實戰，初入發表文章，望各位大佬口下留情不對之處還請大佬指點一下。在加載完后，你自己默認的瀏覽器自動打開配置界面新建項目。 1. 前言記錄自己從基礎學習vue實戰，初入發表文章，望各位大佬口下留情！不對之處還請大佬指點一下。 2. 新建，配置項目 1. 新建Vue-cli3.0腳手架的項目在這里普及一下，什么是Vue-cli？ Vue是一套用于構建用戶界面的漸...

SmallBoyO 2019-08-26 10:16 評論0 收藏0
小光光談前端

摘要：這個問題應該是百度或者知乎都能知道答案的，以上是自己親身學習的一些途徑方便少走一點彎路入門。問題1：前端的學習路線基礎的html，css，js，推薦慕課網免費課程:前端工程師路徑,極客學院免費課程:前端工程師路徑大概刷過就可以了，不用死記硬背某個知識點，css跟js還需要加深學習的，在實戰過程中不懂就去查文檔基礎的ps切圖能力慕課網ps基礎課程擁有自己的虛擬主機傳送...

canopus4u 2019-08-29 16:10 評論0 收藏0
小光光談前端

摘要：這個問題應該是百度或者知乎都能知道答案的，以上是自己親身學習的一些途徑方便少走一點彎路入門。問題1：前端的學習路線基礎的html，css，js，推薦慕課網免費課程:前端工程師路徑,極客學院免費課程:前端工程師路徑大概刷過就可以了，不用死記硬背某個知識點，css跟js還需要加深學習的，在實戰過程中不懂就去查文檔基礎的ps切圖能力慕課網ps基礎課程擁有自己的虛擬主機傳送...

shiguibiao 2019-08-23 10:26 評論0 收藏0