欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VsCode简单配置

程序员文章站 2022-06-01 10:29:50
...
  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
    }
}