VsCode簡單配置

weixin_33938733發表於2018-01-30
VSCode
  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友好化
  1. 配置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
    }
}
  1. 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
    }
}

相關文章