关于代码规范和一些eslint规范

编辑器是vscode,现在首选项里面进行配置

{

    "eslint.autoFixOnSave": true,

    // "workbench.colorTheme": "Monokai",

    "editor.tabSize": 4,

    "editor.formatOnSave": false,

    "prettier.eslintIntegration": true,

    "prettier.singleQuote": false,

    "prettier.semi": false,

    "vetur.format.defaultFormatter.html": "js-beautify-html",

    "eslint.validate": [

        "javascript",

        "javascriptreact",

        {

            "language": "vue",

            "autoFix": true

        },

        "html",

    ],

    "vetur.format.defaultFormatterOptions": {

        "js-beautify-html": {

            "wrap_attributes": "force-aligned"

        }

    },

    "emmet.syntaxProfiles": {

        "vue-html": "html",

        "vue": "html"

    },

    "explorer.confirmDragAndDrop": false,

    "javascript.updateImportsOnFileMove.enabled": "never",

    "workbench.iconTheme": "simple-icons",

    "editor.codeActionsOnSave": {

        "source.fixAll.eslint": true

    },

    "window.zoomLevel": 1,

}

装了插件vetur prettier- javascript formatter,

后来发现用prettier规范代码时出现函数名与括号间没有空格，后来上网发现一套解决办法，就是

    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
    "vetur.format.defaultFormatter.js": "vscode-typescript",

这倒是解决了函数名与括号间的空格问题，但是prettier设置的一些都没有实现，如自动添加引号等

后来经过各种尝试，发现只需要安装两个插件，用eslint来规范就行

下面贴上eslint规范 。eslintrc.js

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

 

module.exports = {

 

//此项是用来告诉eslint找当前配置文件不能往父级查找

root: true,

 

//此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析

parser: "babel-eslint",

 

//此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式

parserOptions: {

// 设置 script(默认) 或 module，如果代码是在ECMASCRIPT中的模块

sourceType: "module",

"ecmaVersion": 6,

"ecmaFeatures": {

"jsx": true

}

},

 

// 此项指定环境的全局变量，下面的配置指定为浏览器环境

env: {

"browser": true,

"node": true,

"commonjs": true,

"es6": true,

"amd": true

},

// https://github.com/standard/standard/blob/master/docs/RULES-en.md

// 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错

extends: "vue",

// 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的

plugins: [

"html",

"flow-vars",

"react"

],

/*

下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-

主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致

"off" -> 0 关闭规则

"warn" -> 1 开启警告规则

"error" -> 2 开启错误规则

*/

rules: {

"indent": ["error", 4], // 缩进4个空格

"consistent-return": 0, // return 后面是否允许省略

"quotes": 0, // 强制一致使用反引号，双引号或单引号

"prefer-const": 0, // 如果一个变量从不重新分配，使用const声明更好

//"space-before-function-paren": 0, // 函数定义时括号前面要不要有空格

"space-before-function-paren": ["error", { // 函数括号前端需要一个空格

"anonymous": "always",

"named": "always",

"asyncArrow": "ignore"

}],

"camelcase": 0,//强制驼峰法命名

"semi": ["error", "always"], // 语句后面添加的分号

"no-unneeded-ternary": 0, // 当存在更简单的选择时不允许三元运算符

"no-return-assign": 0, //

"object-curly-spacing": 0, // 在大括号内强制执行一致的间距

"padded-blocks": 'off', // 要求或不允许块内的填充

"arrow-parens": 0, // 它也将有助于找到箭头函数（=>），这些函数可能被错误地包含在一个条件中，如果这样的比较>=是有意的。

"generator-star-spacing": 0, // 围绕*生成器函数（generator-star-spacing）强制执行间距

"no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,

// "semi-spacing": ["error", {"before": false, "after": false}], // 分号前后不准有空格

"no-trailing-spaces": ["error", { "skipBlankLines": true }], // 允许在空行上结尾空白

"no-multiple-empty-lines": ["error", {

"max": 2, // "max"（默认2：）强制连续空行的最大数量

"maxEOF": 2, // "maxEOF" 在文件末尾强制执行最大数量的连续空行

"maxBOF": 2 // "maxBOF" 在文件的开头强制执行最大数量的连续空行

}]

}

};

插件名称为 prettier-code formatter 以及eslint就行

下面是常用的插件

Beautify,ESLint,Prettier - Code formatter,Prettier - JavaScript formatter,SVN,TortoiseSVN,Vetur,view-in-browser,vue-beautify