VS Code extensions

691 阅读1分钟

VS Code Tools

以前是 prettier结合eslint一起使用。现在eslint也支持了格式化,所以现在项目中只需要使用eslint即可

prettier:支持格式化

module.exports = {
    tabWidth: 4,
    endOfLine: "auto",
    printWidth: 100
};

eslint:检查代码质量

1. VS Code安装eslint插件

2. 项目中添加.eslintrc.js文件

cloud.tencent.com/developer/s…

eslint.vuejs.org/rules/

const path = require("path");
module.exports = {
    root: true,
    env: {
        node: true,
        "jest/globals": true
    },
    extends: [
        "eslint:recommended",
         "plugin:vue/recommended"
    ],
    plugins: [
        "vue",
         "jest",
         "json"
    ],
    parserOptions: {
        parser: "babel-eslint"
    },    
    rules: {
        "comma-dangle": ["error", "never"],
        "comma-spacing": ["error", {
            "after": true
        }],
        "complexity": ["error", 8],
        "curly": "error",
        "eqeqeq": ["error", "always"],
        "indent": ["error", 4, { 
            "ArrayExpression": "first",
            "ObjectExpression": 1,
            "SwitchCase": 1
        }],
        "key-spacing": ["error", {
            "afterColon": true,
            "mode": "strict"
        }],
       .......
    }};

stylelint

stylelint.io/

1. 安装stylelint插件

2. 添加.stylelintrc.js

module.exports = {
    extends: ['stylelint-config-standard'],
    rules: {
        'at-rule-no-unknown': null,
        'font-family-no-missing-generic-family-keyword': null,
        indentation: 4,
        "selector-pseudo-element-no-unknown":[true,{
            ignorePseudoElements: ["v-deep"]
        }]
    }};

Code Spell Checker: 检查拼写插件

GitLens: git 代码管理插件,显示文件最近的commit和作者

Todo Tree: TODO管理

Vetur: vue语法高亮显示,代码自动补全