VS Code 自动修改和保存 代码风格 == eslint+prettier
??? 最近因為用到VS Code，需要統一所有人的代碼風格（前端語言js/html/css等，或者后端語言 go/python等也可以這么用）。
所以參考了一些網絡資料，記錄下設置步驟，以便后續查閱。
?
Step 1: npm 命令窗口，安裝需要的插件
cmd >> npm i -D prettier
# eslint-plugin-prettier插件會調用prettier對你的代碼風格進行檢查，其原理是先使用prettier對你的代碼進行格式化，
# 然后與格式化之前的代碼進行對比，如果過出現了不一致，這個地方就會被prettier進行標記。
cmd >> npm i -D eslint-plugin-prettier
# eslint-config-prettier可以關閉eslint可能與prettier發生沖突的代碼格式化規則。
# 官方稱eslint-plugin-prettier需要與eslint-config-prettier搭配食用才能獲得最佳效果。
cmd >> npm i -D eslint-config-prettier
?
Step 2: 創建react項目
cmd >> cd H:\0_VSCode_Work
cmd >> create-react-app my-app-03
# 打開項目
cmd >> cd ./my-app-03
cmd >> code .
?
Step 3: 創建項目的.eslintignore文件
# 文件路徑 = MY-APP-03/.eslintignore
?
# 在vs code中手動創建文件后".eslintignore"，輸入如下文件內容。
/build/ /config/ /dist/ /*.js /test/unit/coverage/?
Step 4: 創建項目的.eslintrc.js文件
# 文件路徑 = MY-APP-03/src/.eslintrc.js
# 在vs code中手動創建文件后".eslintrc.js"，輸入如下文件內容。
module.exports = {root: true,env: {browser: true,es6: true,node: true},extends: ['standard','plugin:vue/essential','eslint:recommended',"plugin:prettier/recommended"],rules: {"prettier/prettier": "error",// allow async-await'generator-star-spacing': 'off','no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',//強制使用單引號quotes: ['error', 'single'],//強制不使用分號結尾semi: ['error', 'never']},parserOptions: {parser: 'babel-eslint'} }?
?
Step 5: 創建項目的.prettierrc文件
# 文件路徑 = MY-APP-03/.prettierrc
# 在vs code中手動創建文件后".prettierrc"，輸入如下文件內容。
{//一行的字符數，如果超過會進行換行，默認為80"printWidth": 80, //一個tab代表幾個空格數，默認為80"tabWidth": 2, //是否使用tab進行縮進，默認為false，表示用空格進行縮減"useTabs": false, //字符串是否使用單引號，默認為false，使用雙引號"singleQuote": false, //行位是否使用分號，默認為true"semi": true, //是否使用尾逗號，有三個可選值"<none|es5|all>""trailingComma": "none", //對象大括號直接是否有空格，默認為true，效果：{ foo: bar }"bracketSpacing": true, //代碼的解析引擎，默認為babylon，與babel相同"parser": "babylon", //開啟 eslint 支持"eslintIntegration": true }?
Step6 : 修改項目工作區設置文件.vscode/settings.json
?
# 單擊IDE工具的左下角的齒輪，然后單擊菜單"Settings", 在彈出的面板Settings中，選擇子面板"Workspace"，如下圖
?
# 然后，找到參數"Files:Associations"，單擊按鈕"Edit in setting.json"
# 然后，在settings.json文件中，輸入和保存如下內容。
{//.vue文件template格式化支持，并使用js-beautify-html插件"vetur.format.defaultFormatter.html": "js-beautify-html",//js-beautify-html格式化配置，屬性強制換行"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "force-aligned"}},//根據文件后綴名定義vue文件類型"files.associations": {"*.vue": "vue"},//配置 ESLint 檢查的文件類型"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}],//保存時eslint自動修復錯誤"eslint.autoFixOnSave": true,//保存自動格式化"editor.formatOnSave": true }或者，少設置一些參數，如下
最后，記得保存settings.json文件
?
Step7 : 最后，我們測試一下效果
# 首先，創建一個demo.html文件，如下
文件路徑 = MY-APP-03/public/demo.html
<html>dafs <header> demo</header><body><div>亂寫一氣，----001</div><div>亂寫一氣，----002</div></body></html># 然后，我們單擊 快捷鍵"Ctrl+S" 或 菜單"Fiel >> Save All", 則IDE工具自動將上面格式混亂的代碼轉化為風格整潔的代碼，如下圖所示
?
轉載于:https://www.cnblogs.com/itshare/p/11028299.html
總結
以上是生活随笔為你收集整理的VS Code 自动修改和保存 代码风格 == eslint+prettier的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Beta版本发布
- 下一篇： 输出对角线（输出格式控制）