一套流程教你完成基于vue脚手架的vscode代码规范(vetur+eslint+prettier)配置

在写代码的过程当中一般都会要求生产统一风格的代码。规范，简洁的代码好处就不用我多说了吧。接下来就按我的方法来初始化代码生产环境吧。

配置步骤
1.在vscode中下载三个插件 vetur，Prettier，Eslint

2.用vue-cli脚手架创建项目，除了常规的勾选之外，要勾选到Linter/Formatter选项和eslint-prettier
3.修改prettier配置文件
打开vscode设置 “ctrl+,” 来修改prettier配置



4.接下来就是修改eslint配置
npm i eslint -g //先全局安装eslint
cd yourpath //进入你的文件目录
eslint --init //初始化eslint
2、这样，我们就在我们初始化的文件夹里看到一个 .eslintrc.js 文件啦
3、插件我们已经安装完了，配置文件也生成了，之后到vscode中的 首选项–>设置 中找到ESLint的设置
点击箭头指向的笔图像，将eslint.options变成
“eslint.options”: {“configFile”: “F:/VLearning/ESLint/.eslintrc.js”},
其中路径为你的.eslintrc.js所在路径
5、保存后重启vscode后就可以看到原本没有报错的文档报错，证明配置成功~
把下面代码复制到你的.eslintrc.js文件里
module.exports = {
root: true,
env: {
node: true
},
extends: [“plugin:vue/essential”, “@vue/prettier”],
rules: {
‘no-console’: /* process.env.NODE_ENV === ‘production’ ? ‘error’ : ‘off’, */‘off’,
“no-debugger”: process.env.NODE_ENV === “production” ? “error” : “off”,
“vue/order-in-components”: [“error”],
‘vue/attributes-order’: [
‘error’,
{
order: [
‘DEFINITION’,
‘LIST_RENDERING’,
‘CONDITIONALS’,
‘RENDER_MODIFIERS’,
‘GLOBAL’,
‘UNIQUE’,
‘TWO_WAY_BINDING’,
‘OTHER_DIRECTIVES’,
‘OTHER_ATTR’,
‘EVENTS’,
‘CONTENT’
],
alphabetical: false
}
]
},
parserOptions: {
parser: “babel-eslint”
}
};
5.最后vscode设置
在vscode的setting.json文件中修改成如下代码
{
“vetur.format.defaultFormatter.html”: “prettyhtml”,
“vetur.format.defaultFormatterOptions”: {
“prettyhtml”: {
“printWidth”: 100, // No line exceeds 100 characters
“singleQuote”: false // Prefer double quotes over single quotes
}
},
“[scss]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[css]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[javascript]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[json]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[jsonc]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“editor.tabSize”: 2, // tab大小为2空格
“editor.formatOnSave”: false, // 手动保存后自动格式化
“files.autoSave”: “off”, // 取消文件自动保存
“vetur.validation.template”: false,
“git.enableSmartCommit”: true, // 关闭vetur对template区域的检测
// vue 保存自动eslint 格式化
“eslint.autoFixOnSave”: true,
// 让 prettier 使用 eslint 的代码格式进行校验
“eslint.validate”: [
“javascript”,
“javascriptreact”,
“html”,
{
“language”: “html”,
“autoFix”: true
},
{
“language”: “vue”,
“autoFix”: true
}
],
// eslint自动格式化
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true
}
}
这样就完成了，代码严格简介又规范且有矫正功能。